CSS小技巧——画个三角形

CSS学习有一个特点，只要告诉你一个套路，你就会了，但是让你自己想很难想出来。

首先，打开你的编辑器或者jsbin，新建一个html文件和一个css文件，用<link>把两个文件关联起来。

1. 然后在html里新建一个<div>，打开CSS开始编辑

div{
border:10px solid red;
width:10px;
height:10px;
border-top-color:green;
border-bottom-color:blue;
border-left-color:yello;
border-right-color:black;
}

你会发现四个不同颜色的梯形，以及中间有一个空心的正方形

2. 将width或者height慢慢减小，直到0px。
   你会发现出现了两个等腰直角三角形，如果都调到0px的话，会有四个。
   但是到现在还没结束，这些等腰直角三角形还不够，我需要按对角划分的三角形。

3. 将width和height都减到0px,再加一个属性“border-top-width:10px;”

div{
...
width:0px;
height:0px;
...
border-top-width:10px;
}

将"border-top-width:10px;"的值慢慢调到0px，就会发现左边的三角形就是我要的。

4. 接着，将其他颜色都变透明，只留下我要的那块，换成我需要的颜色就行
   最后简化为

div{
border:10px solid transparent;
width:0px;
height:0px;
border-left-color:red;
border-top-width:0px;
}

是不是很简单呢，多练练谁都能会了。