极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。

# 使用 CSS 如何画一个三角形

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 191 (opens new window)

Author

回答者: Sumarina (opens new window)

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

Author

回答者: senking2 (opens new window)

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

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

Author

回答者: cy948 (opens new window)

.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%);
}

image

.box { width: 0; height: 0; border:100px solid transparent; border-bottom-color:
blue; }
Last Updated: 6/26/2022, 10:48:10 AM