css 实现三角形

盒模型中的div默认是一个矩形。那么我们怎么实现三角形呢。

使用字符中的符号。这个跟字体相关，在布局上基本没什么用。

矩形沿着一个角用斜线切一刀就可以得到三角形

一、怎么实现切一刀呢?

1、宽高为0的矩形。设置边框。可以将矩形分为四个三角形。

        #demo1 {
            width: 0;
            height:0;
            border-top: 100px solid red;
            border-bottom: 50px solid green;
            border-left: 50px solid blue;
            border-right: 50px solid grey;
        }

 

2、使用无过渡线性渐变的方式

#demo2 {
            width: 200px;
            height: 100px;
            background: linear-gradient(45deg, red, red 70.72px, green 70.72px, green 200px);
        }

 

3、使用角向渐变

#demo3 {
            width: 200px;
            height: 100px;
            background: conic-gradient(from 90deg at 0 0, red 0, red 10deg, green 10deg);
        }

 

4、使用旋转出父元素，超出隐藏的方式。

#demo4 {
            width: 300px;
            height: 100px;
            position: relative;
            overflow: hidden;
        }
            #demo4::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: red;
                transform-origin: left bottom;
                transform: rotate(65deg);
            }

 

5、css裁剪属性

#demo5 {
            width: 100px;
            height: 100px;
            background: red;
            clip-path: polygon(0 0, 50px 0, 0 100px, 0 0);
        }

 

二、怎么实现角度呢？

使用 rotate ，实现不同角度

#demo7 {
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-bottom: 50px solid green;
            border-left: 50px solid blue;
            border-right: 50px solid grey;
            transform: rotate(45deg);
        }

 

 

三、移除不必要的部分

例1-例3中把不要的部分颜色设置为transparent就可以了。

        #demo8 {
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            transform: rotate(45deg);
        }

 

四、调整占位

如上的方式实现三角形后，在流中，会额外占用一部分位置。需要调整一下，这里根据具体需求来，例1中使用margin-bottom将不需要的border-bottom占用的50px拉回去。

下面的例子还存在着旋转导致的位置偏移。所以拉回去50px的效果依然不理想。这里需要根据实际的需求来调整了。没有一个完美的方案。

        #demo9 {
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-bottom: 50px solid transparent;
            margin-bottom:-50px;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            transform: rotate(45deg);
        }
        #demo10 {
            width: 100px;
            height: 100px;
            border:1px solid green;
        }

 

 

 

五、兼容性

上面的部分方法。不能在IE11之前正常运行。