丁鹿学堂前端培训：前端入门小练习：css绘制三角形

原理解析

css画三角形的本质上是利用border的属性。border-with控制大小， border-style控制样式（实线、虚线等）， border-color控制颜色，分上、右、下、左，想要不同方向的箭头，就把剩余三个方向的箭头设置为transparent即可

.oDiv{
    width: 0; 
    height: 0; 
    border-width: 100px;
    border-style: solid;
    border-color:#f70303  #03bbf8  #1bf703  #9bfc00;
}

向右的：

.oDiv{
    width: 0; 
    height: 0; 
    border-width: 100px;
    border-style: solid;
    border-color:transparent transparent  transparent  #9bfc00;
}

还可以通过添加transform的属性任意旋转

.oDiv{
    width: 0; 
    height: 0; 
    border-width: 100px;
    border-style: solid;
    border-color:transparent transparent  transparent  #9bfc00;
    transform: rotate(180deg);
}

其实在实际开发中，已经很少这么使用了。但是我们每次练习都有自己的目的，这个练习不是说让你去实际应用，如果说是实际应用的话那么的css也没必要写了，很多开发中都是用scss或者less，html也没必要写了，都是用的框架组件。 所以我们要明白自己写练习的目的，就是为了巩固基础。