Soalan Lazim CSS: Cara melukis poligon (segi tiga ~ heksagon)

Bagaimana untuk melukis poligon menggunakan CSS tulen? Artikel ini akan memperkenalkan kepada anda cara melukis segi tiga bermula dari CSS tulen, dan memperkenalkan kaedah melukis segiempat, pentagon, dan heksagon Kaedah pelaksanaan yang lebih tinggi juga boleh dilukis dengan analogi.

Hari ini saya akan mengkaji soalan CSS yang sering diuji dalam temu bual, menggunakan CSS untuk melukis poligon. Kali ini, mengambil segi tiga, segi empat, pentagon dan heksagon sebagai contoh, anda perlu memahami beberapa pengetahuan yang diperlukan sebelum memulakan.

1. Rizab pengetahuan asas

Kali ini kita akan menggunakan pengetahuan CSS tulen untuk melukis beberapa bentuk Untuk melukis bentuk ini, mula-mula belajar yang diperlukan Model kotak titik-css pengetahuan asas CSS. [Cadangan berkaitan: "tutorial video css"]

Seperti yang anda boleh lihat daripada gambar di atas, model kotak standard terdiri daripada kandungan , padding, jidar dan jidar Mari kita lihat situasi khusus menggunakan kod.

<!--HTML部分，此部分代码若是不变，后面将复用不在赘述-->
<div id="main"></div>

/*css部分*/ 
#main { 
  width: 100px;
  height: 100px;
  border: 200px solid red; 
}

Rendering adalah seperti berikut:

2 berlatih , sekarang mari gunakan sifat CSS asas ini untuk melukis segi tiga sepunya, segi empat, pentagon...

2.1 Segiempat

Jika anda tidak boleh menggunakan sifat warna latar belakang secara langsung untuk melukis segiempat , kita dapat melihat dari rajah di atas bahawa jika kita menetapkan lebar dan tinggi kandungan kepada 0 dan menetapkan lebar dan tinggi sempadan, maka kita boleh mendapatkan segi empat yang hanya terdiri daripada sempadan. segi empat selari, dan segi empat tepat Tunggu, mari kita gunakan sempadan untuk melaksanakan tiga grafik yang dinyatakan di atas.

2.1.1 Square

Mula-mula mari kita laksanakan petak termudah.

Kesannya adalah seperti yang ditunjukkan di bawah:

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid black;
  border-right: 200px solid blue;
  border-top: 200px solid pink;
}

2.1.2 Segi empat tepat

Dalam 2.1.1 kami telah mencapai Use border untuk melaksanakan segi empat sama, maka mari kita melaksanakan segi empat tepat berdasarkan pengetahuan matematik yang telah kita pelajari, kita hanya perlu melaraskan panjang dan lebar petak supaya panjang ≠ lebar Mari kita melaksanakannya.

Kesannya adalah seperti di bawah:

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 100px solid red;
  border-right: 100px solid red;
  border-top: 200px solid red;
}

2.1.3 Paralelogram

PS: Pelaksanaan selari memerlukan penggunaan daripada dua Untuk melaksanakan segi tiga, adalah disyorkan untuk melangkaunya di sini Sila pergi ke Bacaan 2.2 untuk melihat pelaksanaan segi tiga, dan kemudian kembali untuk melihat kaedah selari di sini.

Di sini diandaikan bahawa anda telah selesai membaca kandungan 2.2 Seterusnya, merealisasikan segi empat selari.

<div id="wrapper">
	<div class="public"></div>
	<div class="public move"></div>
</div>

Kesannya adalah seperti yang ditunjukkan di bawah:

*{
   margin: 0;
}
#wrapper {
	  position: relative;
}
.public {
   width: 0px;
   height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-top: 200px solid transparent;
  position: absolute;
}
.move {
  transform: rotate(180deg);
  top: 200px;
  left: 200px;
}

2.2 Segitiga

Setakat ini, segi empat termudah ialah selesai , maka adakah anda sudah mempunyai perasaan pada masa ini? Mari kita teruskan. Memandangkan sempadan boleh merealisasikan segi empat, segitiga tidak sepatutnya menjadi masalah, mengikut sudut, ia boleh dibahagikan kepada segi tiga akut, segi tiga tegak dan segi tiga tumpul. satu masa.

2.2.1 Segitiga akut

Mula-mula, mari kita lihat keadaan yang diduduki oleh kiri, kanan, atas dan bawah sempadan apabila lebar dan tinggi kandungan adalah 0. .

Rendering adalah seperti berikut:

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid black;
  border-right: 200px solid blue;
  border-top: 200px solid pink;
}

Ia boleh dilihat dari gambar yang kiri, kanan, atas dan bawah semuanya menduduki segi tiga, maka Apabila kita memerlukan segitiga tertentu, kita hanya perlu menyembunyikan tiga segitiga yang lain Kita boleh menggunakan nilai atribut telus untuk menyembunyikan sempadan, jadi mari kita laksanakannya.

Kesannya adalah seperti yang ditunjukkan dalam gambar:

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-top: 200px solid transparent;
}

2.2.2 Segitiga Kanan

Kini kita boleh melukis akut segi tiga , kita boleh mendapatkan segi tiga tepat berdasarkan gambar di atas hanya memaparkan dua bahagian sempadan Cuba kod

Kesannya seperti yang ditunjukkan dalam gambar:

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid red;
  border-right: 200px solid transparent;
  border-top: 200px solid transparent;
}

<.>

2.2.3 Obtuse Triangle

Gambar di atas mengesahkan kebolehlaksanaan idea sebelumnya. Jadi mari kita fikirkan bagaimana untuk melaksanakan segi tiga tumpul? Pemikiran sebelumnya tidak mungkin, jadi kita perlu mengubah pemikiran kita.

我们可以用两个直角三角形，将小的直角三角形覆盖在大的上面，让我们试一下吧！！

<div></div>
<div></div>

#main1 {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid transparent;
}
#main2 {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid black;
  border-left: 150px solid transparent;
  position: absolute;
  /*这里8px是浏览器中的margin自带的间距，之前没有处理*/
  top: 8px;
  left: 58px;
}

效果图如下所示：

这次通过绝对定位来控制小的直角三角形，那么我们可以通过控制黑色三角形的颜色来显示钝角三角形。

2.3 五边形

三角形都已经学会了，那么很多图形都可以通过三角形拼凑得来，就以五边形为例，这里将以多个三角形来画出五边形。

<div id="wrapper">
    <div class="main1 tool"></div>
    <div class="main2 tool"></div>
    <div class="main3 tool"></div>
    <div class="main4 tool"></div>
    <div class="main5 tool"></div>
</div>

*{
    margin: 0;
}
#wrapper {
    position: relative;
    top: 300px;
    margin-left: 300px;
}
.main2 {
    transform: rotate(72deg);
}
.main3 {
    transform: rotate(144deg);
}
.main4 {
    transform: rotate(216deg);
}
.main5 {
    transform: rotate(288deg);
}
.tool{
    width: 0px;
    height: 0px;
    border-right: 58px solid transparent;
    border-left: 58px solid transparent;
    border-bottom: 160px solid red;
    position: absolute;
    top: 0;
    left: 0;
}

效果如下图所示：

实现五边形的主要难点在于border的三个边的取值，以及旋转的角度。

2.4 六边形

到目前为止三角行、四、五边形的三种形式都实现了一遍，他们均是通过border来实现的，那么让我们来想一下怎么画出一个六边形，有条件的可以在纸上画画，我们可以把一个五边形分成6个等边三角形，让我们通过上面所学知识来实现一下六边形吧！

<div id="wrapper">
  <div class="main1 tool"></div>
  <div class="main2 tool"></div>
  <div class="main3 tool"></div>
  <div class="main4 tool"></div>
  <div class="main5 tool"></div>
  <div class="main6 tool"></div>
</div>

*{
  margin: 0;
}
#wrapper {
  position: relative;
  top: 300px;
  margin-left: 300px;
}
.main2 {
  transform: rotate(60deg);
}
.main3 {
  transform: rotate(120deg);
}
.main4 {
  transform: rotate(180deg);
}
.main5 {
  transform: rotate(240deg);
}
.main6 {
  transform: rotate(300deg);
}
.tool{
  width: 0px;
  height: 0px;
  border-right: calc(60px / 1.732) solid transparent;
  border-left: calc(60px / 1.732) solid transparent;
  border-bottom: 60px solid red;
  transform-origin: top;
  position: absolute;
  top: 0;
  left: 0;
}

通过上面的方法实现五边形，这边难点主要是画出等边三角形。

上面的方法已经实现了，让我们想想其他的方法实现一下吧，这里我们将通过三个四边形实现五边形，让我们一下实验一下吧！！

<div id="wrapper">
  <div class="main1 tool"></div>
  <div class="main2 tool"></div>
  <div class="main3 tool"></div>
</div>

*{
    margin: 0;
}
#wrapper {
    position: relative;
    top: 300px;
    margin-left: 300px;
}
.main1 {
    width: calc(120px / 1.732);
    height: 120px;
    background-color: black;
}
.main2 {
    width: calc(120px / 1.732);
    height: 120px;
    transform: rotate(120deg);
    background-color: black;
}
.main3 {
    width: calc(120px / 1.732);
    height: 120px;
    transform: rotate(240deg);
    background-color: black;
}
.tool{
    position: absolute;
    top: 0;
    left: 0;
}

好了，目前已经讲述了三角形，四边形，五边形，六边形得到实现方式了，更高的实现方式就以此类推了。

原文地址：https://juejin.cn/post/7001772184498601991

作者：执鸢者

更多编程相关知识，请访问：编程入门！！

Atas ialah kandungan terperinci Soalan Lazim CSS: Cara melukis poligon (segi tiga ~ heksagon). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!