使用CSS画一个三角形

HTML结构

  <div class="th-1"></div>
  <div class="th-2"></div>
  <div class="th-3"></div>
  <div class="th-4"></div>
  <div class="th-5"></div>

等腰三角形

/* 等腰三角形 */
.th-1::before {
  content: '';
  border: 35px solid transparent;
  border-bottom-color: lightgreen;
}
/* 或者 */
.th-4 {
  border-color: transparent transparent red transparent;
  border-style: solid;
  border-width: 0px 35px 35px 35px;
  height: 0px;
  width: 0px;
}

等边三角形

/* 等边三角性 */
.th-3::before {
  content: '';
  border-top: 35px solid red;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

直角三角形

/* 直角三角形 */
.th-2::before {
  content: '';
  border-bottom: 35px solid burlywood;
  border-right: 35px solid transparent;
}

空心三角形

.th-5 {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #fff;
}
.th-5::after {
  position: absolute;
  content: '';
  bottom: 0px;
  border: 100px solid transparent;
  border-bottom-color: rgb(139, 218, 152);
  z-index: 1;
}
.th-5::before {
  position: absolute;
  content: '';
  bottom: 7px;
  left: 20px;
  border: 80px solid transparent;
  border-bottom-color: white;
  z-index: 2;
}