CSS画三角形

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;

等边三角形：
只需要算出高即可：

把其余的颜色变为透明就是如下的效果

大部分的都在这里啦，你也可以动手试试，自己调试大小，当然远远不止这些图像！

原创不易，请尊重原创！