CSS画圆形、椭圆、三角形、平行四边形、菱形、梯形、扇形

1、圆形

圆形是非常简单的，利用border-radius实现

HTML代码
<div class="circle"></div>

CSS代码
.circle{
            width:100px;
            height:100px;
            background-color: green;
            border-radius: 50%;
        }

效果展示：

2、椭圆

椭圆和圆形是一样的方法，也是利用border-radius实现，只不过椭圆的div要先设置成矩形，圆形的div要先设置成正方形

HTML代码
<div class="Tcircle"></div>


CSS代码
.Tcircle{
            width:100px;
            height:200px;
            background-color: green;
            border-radius: 50%;
        }

注：如果大家不了解border-radius属性建议先了解一下：developer.mozilla.org/zh-CN/docs/…

3、三角形

三角形的画法需要借助border来实现

在画三角形之前我们先看一下border

从上图可以看出，只要border的宽度不断加大，同时让盒子的width变成0，就会形成三角形：

然后我们把不需要的三角形设置为透明，留下需要的那个就行了

 HTML代码
<div class="triangle"></div>

CSS代码  .triangle{
           width: 0;
           height: 0;
           border: 100px solid transparent;
           border-bottom: 100px solid green;
        }

4、平行四边形

平行四边形的画法原理就是把矩形盒子进行变形，利用transform的skew属性，不知道的先学习一下：developer.mozilla.org/en-US/docs/…

HTML代码
<div class="parallelogram "></div>

CSS代码
.parallelogram {
           width: 150px;
           height: 100px;
           background-color:green;
           transform:skew(30deg);
        }

5、菱形

正方形旋转一下不就是菱形了吗

HTML代码
<div class="diamond "></div>


CSS代码
.diamond {
           width: 150px;
           height: 150px;
           background-color:green;
           transform:rotate(45deg);
        }

6、梯形

梯形和三角形差不多，如果盒模型的width不为0，就会形成一个梯形

HTML代码
<div class="trapezoid "></div>
CSS代码
  .trapezoid {           width: 70px;
           height: 0;
           border: 100px solid transparent;
           border-bottom: 100px solid green;
        }

7、扇形

我们把三角形的border处理成圆角不就是扇形了吗

HTML代码
<div class="sector"></div>

CSS代码
  .sector{
           width: 0px;
           height: 0;
           border: 100px solid transparent;
           border-bottom: 100px solid green;
           border-radius:50%;
        }