CSS实现图形

有一些形状可以通过纯 CSS 实现图形，如下拉三角型，下拉箭头等。。。

下拉三角形

主要通过设置宽高为 0，正常设置其中一条边，其他三条边的 border-color 为透明 transparent。

不能删掉其他三个边框，如果没有其他边框的支撑，上边框只有 20px 的高度，而没有宽度（宽度需要左右边框支撑），从而无法显示。

.triangle {
  width: 0;
  height: 0;
  border: 20px solid #888;
  border-color: #888 transparent transparent transparent;
}

其他变形- codepen: 实心三角形

下拉箭头

旋转

通过旋转其中两边边框 transform: rotate() 实现箭头。

.tri_arrow_rotate {
  width: 40px;
  height: 40px;
  border-top: 8px solid #888;
  border-right: 8px solid #888;
  transform: rotate(45deg);
}

叠加

通过叠加两个双三角，并将一个设置成背景色。通过这个样子的设置，箭头会更加协调。

.tri_arrow_overlay {
  position: relative;
  width: 0;
  height: 0;
  border: 40px solid #888;
  border-color: transparent transparent transparent #888;
}

.tri_arrow_overlay:before {
  content: '';
  position: absolute;
  top: -40px;
  left: -52px;
  border: 40px solid #cc5500;
  border-color: transparent transparent transparent #fff;
}

codepen: 三角箭头