Rumah > Artikel > hujung hadapan web > Bagaimana untuk merealisasikan trapezoid dalam css3

Bagaimana untuk merealisasikan trapezoid dalam css3

WBOYasal: 2021-12-02 17:40:392703semak imbas

Dalam CSS, anda boleh menggunakan atribut sempadan dan "atas sempadan" untuk mencapai kesan trapezoid Anda hanya perlu menambah "sempadan: nilai ketebalan pepejal telus; atas sempadan: tinggi trapezoid warna trapezium pepejal. ;" gaya kepada elemen, iaitu Boleh.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Bagaimana untuk melaksanakan trapezoid dalam css3

Dalam css, jika kita mahu Buat kesan corak trapezoid, bagaimana untuk mencapainya? Contoh berikut menerangkan cara untuk mencapai kesan corak trapezoid dalam CSS3.

Contoh adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
div{
    border:25px solid transparent;
    border-top: 25px solid red;
  height: 200px;
  width: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Hasil keluaran:

Bagaimana untuk merealisasikan trapezoid dalam css3

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Bagaimana untuk merealisasikan trapezoid dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 border

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk memusatkan foto secara menegak dengan cssArtikel seterusnya：Bagaimana untuk memusatkan foto secara menegak dengan css

Artikel berkaitan

Lihat lagi