如何用border来画三角形

学习总结

HTML

<div class="son"></div>

CSS

            .son{
                width: 0px;
                border: 20px solid;
                border-color: black transparent transparent;
            }

效果：

在来个

HTML

        <div class="father"></div>

CSS：

            .father{
                position: relative;
                width: 200px;
                height: 100px;
                border: 1px solid saddlebrown;
                border-radius: 10px;
            }
            .father:before{
                content: "";
                width: 0px;
                border: 10px solid;
                font-size: 0px;  //防止幽灵空白但这里没有效果一样，这是浏览器有渲染
                position: absolute;
                top:100%; left: 50%;
                border-color:#000000 #000000 transparent transparent;
            }