css实现三角形

css实现三角形是个非常有意思的事情。

先看看如果 width height都为0,边框不为零的时候,浏览器是如何渲染的? 莫非是中间留出空位?当然并不是,它会自动把边框变成三角形

  width: 0;
  height: 0;
  border-width: 30px;
  border-style: solid;
  border-color: yellow red green blue;
Paste_Image.png

所以,如果我们想要三角形的话,只需要 只设置边框,让某些边框变成透明即可

把三个边框都设置为透明

#triangle-up {
  width: 0;
  height: 0;
  border-width: 30px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}
Paste_Image.png

上面可以看到,三角形的形状就出来了。其他方向其实也同理

左下的效果

#triangle-left-down {
  width: 0;
  height: 0;
  border-width: 30px;
  border-style: solid;
  border-color: transparent transparent red red;
}
Paste_Image.png

你可能感兴趣的:(css实现三角形)