高级前端
css
【Q190】使用 CSS 如何画一个三角形

使用 CSS 如何画一个三角形

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

Author 回答者: Sumarina (opens in a new tab)

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

Author 回答者: canddyBrea (opens in a new tab)

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

Author 回答者: Innocentw (opens in a new tab)

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

Author 回答者: wangliang000 (opens in a new tab)

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

Author 回答者: cy948 (opens in a new tab)

.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

Author 回答者: zjunbin1286 (opens in a new tab)

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

Author 回答者: Neisun (opens in a new tab)

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