CSS Shapes

มาสร้างรูปร่าง CSS สนุกๆ กันเถอะ! ติดตาม Codepen ของฉันสำหรับรหัสทั้งหมด มาทำสิ่งนี้กันเถอะ

สี่เหลี่ยมผืนผ้าและสี่เหลี่ยมจัตุรัส

รูปร่างทั้งหมดของเราจะถูกห่อเป็น div รูปร่างพื้นฐานที่สุดคือสี่เหลี่ยมจัตุรัสและสี่เหลี่ยม เนื่องจากโดยค่าเริ่มต้น div จะเป็นสี่เหลี่ยมจัตุรัสหรือสี่เหลี่ยมผืนผ้า ขึ้นอยู่กับคุณสมบัติความกว้างและความสูง ดังนั้นสี่เหลี่ยมจัตุรัสจึงมีความกว้างและความสูงเท่ากัน ในขณะที่สี่เหลี่ยมผืนผ้าไม่มี:

.rectangle {
  width: 2rem;
  height: 4rem;
  background-color: violet;
}

.square {
  width: 5rem;
  height: 5rem;
  background-color: lime;
}

การแจ้งเตือน :เราใช้ rem ซึ่งยึดตามขนาดฟอนต์รูทและอนุญาตให้ปรับขนาดได้ง่าย นี่เป็นค่าเริ่มต้นบนเบราว์เซอร์ (โดยปกติคือ 16px) เราตั้งค่าขนาดตัวอักษรเป็น 20px ดังนั้น 2rem คือ 40px

วงกลม

เราจะดำเนินการต่อและสร้างวงกลมสำหรับรูปโปรไฟล์ ในการสร้างวงกลมจะคล้ายกับสี่เหลี่ยมจัตุรัส แต่เราต้องระบุ border-radius ในการปัดเศษมุมจะต้องอยู่ที่ 50% หากเราต้องการวงรี เราจะแก้ไขความกว้าง/ความสูงในแนวเดียวกับสี่เหลี่ยมผืนผ้า

มาสร้างรูปโปรไฟล์กันเถอะ:

.profile-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: url("https://user-images.githubusercontent.com/15071636/91342237-57ad9a00-e7a0-11ea-97bc-606a5998b29a.jpg");
  background-position: center center;
  background-size: cover;
}

หมายเหตุ :คุณสมบัติพื้นหลังคือการได้รูปภาพ ปรับขนาด และจัดกึ่งกลาง

สี่เหลี่ยมด้านขนาน

เรายังสร้างสี่เหลี่ยมด้านขนานได้ รูปร่างนี้จะมีประโยชน์เมื่อเพิ่มเอฟเฟกต์ข้อความสุดเจ๋ง ในที่นี้ เราจะใช้คุณสมบัติ transform และเราจะใช้ค่าความเอียงเพื่อแปลงรูปร่าง (และทุกอย่างที่อยู่ภายใน) เป็นรูปสี่เหลี่ยมด้านขนานที่มีมุม 20 หรือ -20 องศา

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

.parallelogram {
  color: ivory;
  width: 6rem;
  height: 1.5rem;
  transform: skew(-20deg);
  background: indianred;
}

ดูเท่ดีนะ 😎

รูปทรงอื่นๆ

ตอนนี้เรามีความรู้เกี่ยวกับรูปร่าง CSS และการใช้งานแล้ว มาดูรูปร่างอื่นๆ กันดีกว่า ทั้งหมดนี้คุณสามารถเล่นด้วยตัวเองใน Codepen ของฉัน

.triangle {
  width: 0;
  height: 0;
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-bottom: 5rem solid hotpink;
}

แม้ว่าจะมีหลายวิธีในการทำใจ และคุณสามารถค้นหาการทำซ้ำได้มากมายทางออนไลน์ แต่วิธีนี้ค่อนข้างตรงไปตรงมา

.heart {
  width: 10rem;
  background: radial-gradient(circle at 60% 65%, goldenrod 64%, transparent 65%)
      top left, radial-gradient(
        circle at 40% 65%,
        goldenrod 64%,
        transparent 65%
      ) top right,
    linear-gradient(to bottom left, goldenrod 43%, transparent 43%) bottom left,
    linear-gradient(to bottom right, goldenrod 43%, transparent 43%) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.heart::before {
  content: "";
  display: block;
  padding-top: 100%;
}

ไปข้างหน้าและเล่นกับเปอร์เซ็นต์และเปลี่ยนสี คุณสามารถดูว่าหัวใจถูกสร้างขึ้นอย่างไร ดังนั้นเราจะเห็นว่าด้วย ::before และ ::after pseudo-elements เราสามารถสร้างรูปร่างเจ๋งๆ ได้อย่างไร

นอกจากนี้ ด้วย polygon() ฟังก์ชั่นเราสามารถระบุรูปร่างอื่น ๆ ขยายขอบเขตของเราได้

.letter-t {
  width: 5rem;
  height: 5rem;
  margin: 0 1rem;
  shape-outside: polygon(
    0 0,
    100% 0,
    100% 20%,
    60% 20%,
    60% 100%,
    40% 100%,
    40% 20%,
    0 20%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 20%,
    60% 20%,
    60% 100%,
    40% 80%,
    40% 20%,
    10% 20%
  );
  background: navajowhite;
}

ตรวจสอบ เครื่องมือสร้างเส้นทางคลิป เครื่องมือเจ๋ง ๆ ที่จะสร้างโค้ดให้กับคุณสำหรับรูปร่างต่างๆ!