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{
            width: 100px;
            height: 100px;
            /* border-top: 50px solid orange; */
            border-left: 50px solid transparent;
            /* border-right: 50px solid transparent; */
            border-bottom: 50px solid brown;    
        }

效果：

 

标签：solid,等腰,50px,100px,梯形,几何,border,CSS
来源： https://www.cnblogs.com/zhao-qin/p/16315398.html