css创建三角形

Daming 2017-12-18
0条评论 208 次浏览
Daming 2017-12-180条评论 208 次浏览

定义一个矩形,将矩形的宽高设置为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

0

发表评论

电子邮件地址不会被公开。