Bagaimana untuk menulis pentagon tidak teratur dalam css3

WBOY
Lepaskan: 2021-12-16 18:19:38
asal
3180 orang telah melayarinya

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.

Bagaimana untuk menulis pentagon tidak teratur dalam css3

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=&#39;left&#39;></div>
</body>
</html>
Salin selepas log masuk

Hasil output:

Bagaimana untuk menulis pentagon tidak teratur dalam css3

(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!

Label berkaitan:
css
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan