如何用border来画三角形

学习总结

HTML

CSS

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

效果:

在来个如何用border来画三角形_第1张图片

HTML

        

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;
            }

你可能感兴趣的:(css)