CSS教程

CSS画几何图

本文主要是介绍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;    
        }

效果：

 

这篇关于CSS画几何图的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航