css 实现三角形

border

.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid skyblue;
  border-right: 100px solid transparent;
}

当然，实现一个等边三角形也是可以的：

.triangle {
  width: 0;
  height: 0;
  border-left: 69px solid transparent;
  border-right: 69px solid transparent;
  border-bottom: 120px solid skyblue;
}

linear-gradient

linear-gradient 需要结合 background-image 来实现三角形：

.triangle {
  width: 160px;
  height: 200px;
  outline: 2px solid skyblue;
  background-repeat: no-repeat;
  background-image: linear-gradient(32deg, orangered 50%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(148deg, orangered 50%, rgba(255, 255, 255, 0) 50%);
  background-size: 100% 50%;
  background-position: top left, bottom left;
}

clip-path

clip-path 是最精简和最可具扩展性的。 不过目前其在浏览器兼容性不是很好，使用时要考虑浏览器是否支持。

.triangle {
  margin: 100px;
  width: 160px;
  height: 200px;
  background-color: skyblue;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

CSS 实现等边三角形

<div class="d1">
  <div class="d2">
    <div class="d3">
      <div class="d4"></div>
    </div>
  </div>
</div>

div {
  width: 200px;
  height: 200px;
}
/*d1与d4位置重合*/
.d1 {
  margin-top: 200px;
  transform: rotate(30deg);
  transform-origin: 200px 200px;
  overflow: hidden;
  position: relative;
}
.d2 {
  transform: rotate(-30deg);
  transform-origin: 0 200px;
  overflow: hidden;
  position: absolute;
}
.d3 {
  transform: rotate(-30deg);
  transform-origin: 200px 200px;
  overflow: hidden;
  position: absolute;
}
.d4 {
  background: green;
}