CSS 绘制技巧

如何画一条 0.5px 的线？

• transform: 把 1px 线条按 Y 轴缩小一半;

hr {
  height: 1px;
  border: none;
  background-color: black;
  transform: scaleY(0.5);
}

• 伪元素 + box-shadow: 用 ::after 画 0.25px 线模拟;

hr::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  box-shadow: 0 0.25px 0.25px rgba(0, 0, 0, 0.5);
}

如何用 border 画三角形？

• 原理: 四条边框在转角以斜线相接, 各自是梯形区域;
• content 尺寸趋近 0 时, 边框拼成三角形;

div {
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-bottom-color: red;
}

如何用 border 画扇形？

• 在前者基础上加 border-radius, 让边框端点变圆;

div {
  border: 100px solid transparent;
  width: 0;
  height: 0;
  border-radius: 100px;
  border-top-color: red;
}