Every little helps.积少成多。
今天我们使用最简单的css来画一些简单的图形
1.首先设置一个div
<div class='d1'></div>
2.然后给这个div设置样式
.d1{
margin:50px auto;
width:100px;
height:100px;
border-left: 20px red solid;
border-top: 20px blue solid;
border-right: 20px green solid;
border-bottom: 20px yellow solid;
}
这是结果
然后就可以扩展想象一下,把内容的宽和高设置为0,让边框来填充,那么就是这种情况:
margin:50px auto;
width:0px;
height:0px;
border-left: 50px red solid;
border-top: 50px blue solid;
border-right: 50px green solid;
border-bottom:50px yellow solid;
那么下一步就是把不需要的三角形的边框设置为透明色
margin:50px auto;
width:0px;
height:0px;
border-left: 50px transparent solid;
border-top: 50px transparent solid;
border-right: 50px transparent solid;
border-bottom:50px yellow solid;
就有了一个三角形啦!然后可以调整颜色,位置,方向什么的
那么这是最简单的三角形画法,还有以下变形的三角形
可以调整边框的大小,达到不同的效果,当然也是不规则的图形
margin:50px auto;
width:0px;
height:0px;
border-left: 20px red solid;
border-top: 30px blue solid;
border-right: 40px green solid;
border-bottom:50px yellow solid;
可以画一个直角三角形(红色),为了演示,可以把蓝和绿换为透明色,这里没换是因为可以看清楚原理
margin:50px auto;
width:0px;
height:0px;
border-left: 40px red solid;
border-top: 20px blue solid;
border-right: 40px green solid;
border-bottom:20px red solid;
等腰直角三角形
margin:50px auto;
width:0px;
height:0px;
border-left: 100px purple solid;
border-top: 100px transparent solid;
border-right: 100px transparent solid;
border-bottom:100px purple solid;
等边三角形:
只需要算出高即可:
把其余的颜色变为透明就是如下的效果
大部分的都在这里啦,你也可以动手试试,自己调试大小,当然远远不止这些图像!
原创不易,请尊重原创!