【Q190】使用 CSS 如何画一个三角形

[shfshanyue]

[Sumarina]

.triangle { width: 0px; height: 0px; border: 100px solid; border-color: transparent transparent rgba(134, 241, 143,1) transparent; }

[canddyBrea]

.container{ width: 0; height:0; border-color: transparent; border-left: 100px solid #f00; }

[Innocentw]

    .triangle {
      width: 0;
      border: 100px solid transparent;
      border-bottom: 100px solid rgba(66, 142, 212, 0.4);
    }

[wangliang000]

 .container{
width:0;
border:100px solid transparent;
border-bottom-color:#000;
}

[cy948]

        .triangle {
            margin: 0 auto;
            width: 50vh;
            height: 50vh;
            background-color: aqua;
            /* 
                画多边形： 
                polygon(x y, x y, ...)
                一组 x y, 代表一个点
                x: 往右增加
                y: 往下增加
            */
            clip-path: polygon(0 0, 0% 100%, 100% 100%);
        }

[zjunbin1286]

.box {
    width: 0;
    height: 0;
    border:100px solid transparent;
    border-bottom-color: blue;
}

[Neisun]

CSS实现三角形的核心，在于设置元素宽高为0，宽高由border撑起，设置其他三个border为透明 https://stackblitz.com/edit/web-platform-nkudf7?file=index.html,styles.css