CSS画几何图

如何画直角梯形、等腰梯形？

首先先试一下，下面这段代码

<div class="box"></div>

.box{
            width: 100px;
            height: 100px;
            border-top: 50px solid orange;
            border-left: 50px solid blue;
            border-right: 50px solid purple;
            border-bottom: 50px solid brown;
        }

实现： 设置四个border，得到四个等腰梯形。

等腰梯形思路如下：

 

代码：

<div class="box"></div>
.box{
            width: 100px;
            height: 100px;
            /* border-top: 50px solid orange; */   //去掉上面的边框，否则会出现两个等腰梯形
            border-left: 50px solid transparent;   //左边框透明
            border-right: 50px solid transparent;　//右边框透明
            border-bottom: 50px solid brown;       
        }

结果如下：

 

 直角梯形思路：

 

 

 

代码：

<div class="box"></div> 
.box{

 　　　　　　height: 100px;

            width: 100px;

            border-bottom: 60px solid #ecefff;

            border-left: 60px solid transparent;

        }

效果：

 

 

 下一篇介绍三角形的实现。