css怎么实现三角形

实现方法：1、利用高宽为零的容器和透明的border；2、利用线性渐变linear-gradient；3、使用“transform:rotate”配合“overflow:hidden”；4、利用“&#9660”、“&#9650”等字符绘制。

使用 border 绘制三角形 

使用 border 实现三角形应该是大部分人都掌握的，也是各种面经中经常出现的，利用了高宽为零的容器及透明的 border 实现。

简单的代码如下：

<div class='normal'></div>

html, body {

  width: 100%;

  height: 100%;

  display: flex;

}

div {

  width: 0px;

  height: 0px;

  margin: auto;

}

.normal {

  border-top: 50px solid yellowgreen;

  border-bottom: 50px solid deeppink;

  border-left: 50px solid bisque;

  border-right: 50px solid chocolate;

}

高宽为零的容器，设置不同颜色的 border：

 这样，让任何三边的边框的颜色为 transparent，则非常容易得到各种角度的三角形：

<div class='top'></div>

<div class='bottom'></div>

<div class='left'></div>

<div class='right'></div>

.top {

  border: 50px solid transparent;

  border-bottom: 50px solid deeppink;

}

.left {

  border: 50px solid transparent;

  border-right: 50px solid deeppink;

}

 .bottom {

  border: 50px solid transparent;

  border-top: 50px solid deeppink;

}

.right {

  border: 50px solid transparent;

  border-bottom: 50px solid deeppink;

}

使用 linear-gradient 绘制三角形 

接着，我们使用线性渐变 linear-gradient 实现三角形。

它的原理也非常简单，我们实现一个 45° 的渐变：

 

div {

  width: 100px;

  height: 100px;

  background: linear-gradient(45deg, deeppink, yellowgreen);

}

让它的颜色从渐变色变为两种固定的颜色 

div {

  width: 100px;

  height: 100px;

  background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);

}

 

再让其中一个颜色透明即可：

div {

  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);

}