css画三角形

用css怎么画一个三角形？

把div的border设置为10px，隐藏其余三条边，只留一条边显示。看看是否有思路？

知乎上面有个大神讲的很好，在此附上链接，不再赘述。
详细讲解css如何画三角形

.triangle {
    width: 0;//如果宽度不为0，就是一个等腰梯形
    height: 0;
    border: 100px solid #000;
    border-color: transparent transparent #000 transparent; //上、右、左为透明，底边为黑色
}

现在一个等腰三角形已经画出来了。

多说一句： 你看到这个div的宽高都是0， 他现在显示的都是他的border，一个div没有宽高也是妥妥的可以显示的昂~
此时，别忘了，他的其他三条边都是存在的，只是颜色显示为透明的，你看不到了而已。让他们都显示出来就是这样子的:

现在这个黑色的等腰三角形底边长是200px，有100px是来自于border-left的宽度，有100px是来自border-right的宽度。所以我们只要切掉border-left就会得到一个直角三角形~（当然，此时又要把其余三边的颜色显示为透明）

//设置border-left为0
border-width: 100px 100px 100px 0;

看到这里我想不用多说，任何大小、方向（正三角、倒三角等）的三角形你都可以自己画出来了。

画一个平行四边形

怎么画一个平行四边形呢？我自己一开始的思路先把梯形画出来，多余的部分，再画一个三角形，把多余的部分覆盖掉就是了。

<div class="parallelogram">
    <div class="triangle"></div>
</div>

//样式部分
.parallelogram {
    position: relative;
    width: 100px;
    height: 0;
    border: 100px solid #000;
    border-color: transparent transparent #000 transparent;
    border-width: 100px 0 100px 100px;
}
.triangle{
    position: absolute;
    width: 0;
    height: 0;
    border: 50px solid #fff;
    border-color: transparent #fff #fff transparent;
}

大概浏览了一下别人的博客，发现一种更简单的做法，transform的skew可以直接对div倾斜转换。果然别人家的代码总是简短而优雅。
附上代码和效果图：

.parallelogram {
    width: 150px;
    height: 100px;
    margin-left: 20px;
    transform: skew(-20deg);
    background: #000;
}

左右箭头 & 空心三角形

之前写项目的时候用到了左右箭头， 类似于大于号、小于号这样子的，我用的时候，虽然大小可以设置，但是这个开口的角度我不满意，（其实项目中用到，用个图标就好了）终于有一天我看到了有人用css画空心的三角形，还有我要的左右箭头。

左右箭头，我看了代码才发现真的很简单。嗯，就是给个div的两条边，然后旋转一下。。。。
但是这种方式画出来的箭头角度肯定是90度，如果想要其他角度还是得通过画一个空心的三角形，再调整他的角度。

.right-arrow {
    width: 40px;
    height: 40px;
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    transform: rotate(45deg);
}

最后说一下空心三角形，项目中遇到类似微信对话框形状的就可以用这种办法画啦。大致思路就是大三角形里面套一个小三角形，小三角形的颜色设置成背景色就好了~
附上代码和效果图：

.triangle {
    position: relative;
    width: 0;
    height: 0;
    border: 50px solid #000;
    border-color: transparent transparent #000 transparent;
}
.triangle:after{
    position: absolute;
    left: -48px;
    top: -47px;
    content: '';
    width: 0;
    height: 0;
    border: 48px solid #fff;
    border-color: transparent transparent #fff transparent;
}

简单的总结了一下css如何画三角形、平行四边形，也是帮自己梳理了一遍思路和画法。网上还有很多诸如五角星、鸡蛋、爱心等图形，感兴趣的可以上网看一下。如有错误，恳请指正。