Rumah > hujung hadapan web > tutorial css > 仅用CSS 创建各种不同的图形形状

仅用CSS 创建各种不同的图形形状

巴扎黑
Lepaskan: 2017-05-01 14:03:54
asal
1943 orang telah melayarinya

 介绍

  今天,我们要学习如何使用简单的CSS来创建不同类型的平面图形。

 使用代码

  矩形

.rectangle {
    width: 250px;
    height: 150px;
    background-color: #6DC75F;
}

<p></p>
Salin selepas log masuk

  三角形

.triangleUp {
            border-left: 75px solid transparent;
            border-right: 75px solid transparent;
            border-bottom: 150px solid  #6DC75F;
            width: 0;
            height: 0;
        }

<p class="triangleUp"></p>
Salin selepas log masuk

  椭圆形

.oval {
    width: 300px;
    height: 150px;
    background: #6DC75F;
    -moz-border-radius: 150px / 75px;
    -webkit-border-radius: 150px / 75px;
    border-radius: 150px / 75px;
}

<p class="oval"></p>
Salin selepas log masuk

  月牙形

.moon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 green;
}

<p class="moon"></p>
Salin selepas log masuk

  树叶

.leaf {
    border-radius: 5px 300px 3px 300px;
    background: #6DC75F;
    width: 150px;
    height: 150px;
}

<p class="leaf"></p>
Salin selepas log masuk

 兴趣点

  CSS能让你完成很多令人惊艳的事情…祝大家编码愉快!

Atas ialah kandungan terperinci 仅用CSS 创建各种不同的图形形状. 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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan