css创建三角形

东明兄 2017-12-18
0条评论 881 次浏览
东明兄 2017-12-180条评论 881 次浏览

定义一个矩形,将矩形的宽高设置为0,可以发现border的四个边都是一个三角形,要实现三角形只需将其中几个边background设置为transparent,即可得到三角形.

<div class="triangle"></div>
        .triangle{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid red;
        }

demo演示地址:http://demo.crazyming.com/?link=topic/d6/css三角形.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注