Jadual Kandungan
1. Rizab pengetahuan asas
2 berlatih , sekarang mari gunakan sifat CSS asas ini untuk melukis segi tiga sepunya, segi empat, pentagon...
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.
Mula-mula mari kita laksanakan petak termudah.
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.
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.
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.
Mula-mula, mari kita lihat keadaan yang diduduki oleh kiri, kanan, atas dan bawah sempadan apabila lebar dan tinggi kandungan adalah 0. .
Kini kita boleh melukis akut segi tiga , kita boleh mendapatkan segi tiga tepat berdasarkan gambar di atas hanya memaparkan dua bahagian sempadan Cuba kod
2.3 五边形
2.4 六边形
Rumah hujung hadapan web tutorial css Soalan Lazim CSS: Cara melukis poligon (segi tiga ~ heksagon)

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

Sep 16, 2021 am 10:57 AM
css segi tiga segi enam Poligon

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.

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

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"]

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

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>
Salin selepas log masuk
/*css部分*/ 
#main { 
  width: 100px;
  height: 100px;
  border: 200px solid red; 
}
Salin selepas log masuk

Rendering adalah seperti berikut:

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

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;
}
Salin selepas log masuk
Salin selepas log masuk

Soalan Lazim CSS: Cara melukis poligon (segi tiga ~ heksagon)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;
}
Salin selepas log masuk

Soalan Lazim CSS: Cara melukis poligon (segi tiga ~ heksagon)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>
Salin selepas log masuk
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;
}
Salin selepas log masuk

Soalan Lazim CSS: Cara melukis poligon (segi tiga ~ heksagon)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;
}
Salin selepas log masuk
Salin selepas log masuk

Soalan Lazim CSS: Cara melukis poligon (segi tiga ~ heksagon)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;
}
Salin selepas log masuk

Soalan Lazim CSS: Cara melukis poligon (segi tiga ~ heksagon)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;
}
Salin selepas log masuk

<. 🎜>

2.2.3 Obtuse TriangleSoalan Lazim CSS: Cara melukis poligon (segi tiga ~ heksagon)

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 id="main1"></div>
<div id="main2"></div>
Salin selepas log masuk
#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;
}
Salin selepas log masuk

效果图如下所示:

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

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

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>
Salin selepas log masuk
*{
    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;
}
Salin selepas log masuk

效果如下图所示:

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

实现五边形的主要难点在于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>
Salin selepas log masuk
*{
  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;
}
Salin selepas log masuk

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

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

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

<div id="wrapper">
  <div class="main1 tool"></div>
  <div class="main2 tool"></div>
  <div class="main3 tool"></div>
</div>
Salin selepas log masuk
*{
    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;
}
Salin selepas log masuk

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

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

原文地址: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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah maksud pemegang tempat dalam vue Apakah maksud pemegang tempat dalam vue May 07, 2024 am 09:57 AM

Dalam Vue.js, atribut pemegang tempat menentukan teks pemegang tempat bagi elemen input, yang dipaparkan apabila pengguna belum memasukkan kandungan, menyediakan petua atau contoh input dan meningkatkan kebolehcapaian borang. Penggunaannya adalah untuk menetapkan atribut pemegang tempat pada elemen input dan menyesuaikan penampilan menggunakan CSS. Amalan terbaik termasuk relevan dengan input, pendek dan jelas, mengelakkan teks lalai dan mempertimbangkan kebolehaksesan.

Apakah maksud span dalam js Apakah maksud span dalam js May 06, 2024 am 11:42 AM

Teg span boleh menambah gaya, atribut atau gelagat pada teks Ia digunakan untuk: menambah gaya, seperti warna dan saiz fon. Tetapkan atribut seperti id, kelas, dsb. Tingkah laku yang berkaitan seperti klik, tuding, dsb. Tandakan teks untuk pemprosesan atau petikan selanjutnya.

Apakah maksud rem dalam js Apakah maksud rem dalam js May 06, 2024 am 11:30 AM

REM dalam CSS ialah unit relatif berbanding saiz fon elemen akar (html). Ia mempunyai ciri-ciri berikut: relatif kepada saiz fon elemen akar, tidak dipengaruhi oleh elemen induk. Apabila saiz fon elemen akar berubah, elemen menggunakan REM akan melaraskan dengan sewajarnya. Boleh digunakan dengan mana-mana harta CSS. Kelebihan menggunakan REM termasuk: Responsif: Pastikan teks boleh dibaca pada peranti dan saiz skrin yang berbeza. Ketekalan: Pastikan saiz fon adalah konsisten di seluruh tapak web anda. Kebolehskalaan: Tukar saiz fon global dengan mudah dengan melaraskan saiz fon elemen akar.

Bagaimana untuk memperkenalkan imej ke dalam vue Bagaimana untuk memperkenalkan imej ke dalam vue May 02, 2024 pm 10:48 PM

Terdapat lima cara untuk memperkenalkan imej dalam Vue: melalui URL, memerlukan fungsi, fail statik, arahan v-bind dan imej latar belakang CSS. Imej dinamik boleh dikendalikan dalam sifat pengiraan atau pendengar Vue, dan alatan yang digabungkan boleh digunakan untuk mengoptimumkan pemuatan imej. Pastikan laluan adalah betul jika tidak ralat memuatkan akan muncul.

Apakah nod dalam js Apakah nod dalam js May 07, 2024 pm 09:06 PM

Nod ialah entiti dalam DOM JavaScript yang mewakili elemen HTML. Ia mewakili elemen tertentu dalam halaman dan boleh digunakan untuk mengakses dan memanipulasi elemen tersebut. Jenis nod biasa termasuk nod elemen, nod teks, nod ulasan dan nod dokumen. Melalui kaedah DOM seperti getElementById(), anda boleh mengakses nod dan mengendalikannya, termasuk mengubah suai sifat, menambah/mengalih keluar nod anak, memasukkan/menggantikan nod dan nod pengklonan. Traversal nod membantu menavigasi dalam struktur DOM. Nod berguna untuk mencipta kandungan halaman, pengendalian acara, animasi dan pengikatan data secara dinamik.

Dalam bahasa apakah pemalam penyemak imbas ditulis? Dalam bahasa apakah pemalam penyemak imbas ditulis? May 08, 2024 pm 09:36 PM

Pemalam penyemak imbas biasanya ditulis dalam bahasa berikut: Bahasa bahagian hadapan: JavaScript, HTML, CSS Bahasa bahagian belakang: C++, Rust, WebAssembly Bahasa lain: Python, Java

Bagaimana untuk menetapkan atribut yang tidak diketahui dalam kaedah vscode vscode untuk menetapkan atribut yang tidak diketahui Bagaimana untuk menetapkan atribut yang tidak diketahui dalam kaedah vscode vscode untuk menetapkan atribut yang tidak diketahui May 09, 2024 pm 02:43 PM

1. Mula-mula, buka ikon tetapan di sudut kiri bawah dan klik pilihan tetapan 2. Kemudian, cari lajur CSS dalam tetingkap lompat .

Apakah yang dilakukan oleh ref dan id dalam vue? Apakah yang dilakukan oleh ref dan id dalam vue? May 02, 2024 pm 08:42 PM

Dalam Vue.js, ref digunakan dalam JavaScript untuk merujuk elemen DOM (boleh diakses oleh subkomponen dan elemen DOM itu sendiri), manakala id digunakan untuk menetapkan atribut id HTML (boleh digunakan untuk penggayaan CSS, penanda HTML dan carian JavaScript ).

See all articles