Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menulis pentagon tidak teratur dalam css3
Bagaimana untuk menulis pentagon tidak teratur dalam css3
- WBOYasal
- 2021-12-16 18:19:383227semak imbas
Penulisan: 1. Gunakan pernyataan "sempadan: panjang pepejal lutsinar; sempadan-kanan: warna pepejal ketinggian" untuk menetapkan elemen kepada gaya segi tiga 2. Gunakan pernyataan "margin: nilai" untuk menetapkan unsur segi tiga dan segi tiga yang sama Jarak antara unsur segi empat tepat lebar ialah 0.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara menulis pentagon tidak sekata dalam css3
Dalam css, jika kita ingin menulis pentagon tidak sekata, mula-mula kita Anda perlu mencipta segitiga dan elemen segi empat tepat dengan lebar yang sama dengan segi tiga, dan kemudian hilangkan jurang antara kedua-dua elemen, supaya segi tiga dan segi empat tepat boleh disambung menjadi pentagon yang tidak sekata.
Contohnya adalah seperti berikut:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五边形</title>
<style type="text/css">
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid red;
border-bottom: 50px solid transparent;
float: left;
}
#left{
width: 200px;
height: 100px;
background: red;
margin-left: 50px;
}
</style>
</head>
<body>
<div id="triangle-left"></div>
<div id='left'></div>
</body>
</html>Hasil output:
(Perkongsian video pembelajaran: tutorial video css )
Atas ialah kandungan terperinci Bagaimana untuk menulis pentagon tidak teratur dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!