css 实现三角形

#demo1 { width: 0; height: 0; border-top: 100px solid rgba(255, 0, 0, 1); border-bottom: 50px solid rgba(0, 128, 0, 1); border-left: 50px solid rgba(0, 0, 255, 1); border-right: 50px solid rgba(128, 128, 128, 1) }
#demo2 { width: 200px; height: 100px; background: linear-gradient(45deg, rgba(255, 0, 0, 1), rgba(255, 0, 0, 1) 70.72px, rgba(0, 128, 0, 1) 70.72px, rgba(0, 128, 0, 1) 200px) }
#demo3 { width: 200px; height: 100px }
#demo4 { width: 300px; height: 100px; position: relative; overflow: hidden }
#demo4::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 0, 0, 1); transform-origin: left bottom; transform: rotate(65deg) }
#demo5 { width: 100px; height: 100px; background: rgba(255, 0, 0, 1); clip-path: polygon(0 0, 50px 0, 0 100px, 0 0) }
#demo7 { width: 0; height: 0; border-top: 100px solid rgba(255, 0, 0, 1); border-bottom: 50px solid rgba(0, 128, 0, 1); border-left: 50px solid rgba(0, 0, 255, 1); border-right: 50px solid rgba(128, 128, 128, 1); transform: rotate(45deg) }
#demo8 { width: 0; height: 0; border-top: 100px solid rgba(255, 0, 0, 1); border-bottom: 50px solid rgba(0, 0, 0, 0); border-left: 50px solid rgba(0, 0, 0, 0); border-right: 50px solid rgba(0, 0, 0, 0); transform: rotate(45deg) }
#demo9 { width: 0; height: 0; border-top: 100px solid rgba(255, 0, 0, 1); border-bottom: 50px solid rgba(0, 0, 0, 0); margin-bottom: -50px; border-left: 50px solid rgba(0, 0, 0, 0); border-right: 50px solid rgba(0, 0, 0, 0); transform: rotate(45deg) }
#demo10 { width: 100px; height: 100px; border: 1px solid rgba(0, 128, 0, 1) }

盒模型中的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之前正常运行。