CSS 绘制圆形与三角形技巧：border 与 border-radius 实战

绘制圆形与椭圆

想要正圆？直接使用 border-radius: 50%，只要容器是正方形即可。

/* 基础圆 */
.basic-circle {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
}

/* 椭圆 */
.fat-ellipse {
  width: 200px;
  height: 100px;
  background: #f093fb;
  border-radius: 50%;
}

/* 精准控制椭圆 */
.precise-ellipse {
  width: 300px;
  height: 150px;
  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  border-radius: 150px / 75px;
}

border-radius 还支持斜杠语法，可以为每个角单独设置水平和垂直半径，从而创建花瓣形或胶囊形。

/* 胶囊形状 */
.capsule {
  width: 200px;
  height: 60px;
  background: #ff6b6b;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

/* 动态变形 */
.super-flower {
  width: 150px;
  height: 150px;
  background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

绘制三角形

核心方法是将宽高设为 0，只保留一边的 border 有颜色，其他三边透明。

/* 四大基础方向 */
.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #e74c3c;
}

.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 80px solid #3498db;
}

.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 80px solid #2ecc71;
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 80px solid #f39c12;
}

通过调整透明边框的宽度比例，可以改变三角形的胖瘦和角度。

/* 胖三角和瘦三角 */
.fat-triangle {
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 50px solid #9b59b6;
}

.skinny-triangle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 100px solid #1abc9c;
}

/* 圆角三角形 */
.rounded-triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid #ff6b6b;
  border-radius: 50%;
}

优缺点与注意事项

优点：

• 无需加载图片，减少 HTTP 请求。
• 放大缩小不失真。
• 修改颜色只需更改代码，维护方便。

缺点：

• 复杂图形代码可读性较差。
• 某些旧浏览器兼容性可能不佳。
• 无法直接对形状添加阴影（需配合伪元素或 filter）。

/* 错误示范：box-shadow 作用在看不见的盒子上 */
.wrong-shadow {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #3498db;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* 正确做法：使用 filter */
.correct-shadow {
  position: relative;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #3498db;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.3));
}

实际应用场景

下拉菜单箭头

利用伪元素 ::after 结合 border 绘制，支持 hover 变色和旋转动画。

.dropdown-toggle::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #666;
  transition: transform 0.3s, border-color 0.3s;
}

.dropdown.active .dropdown-toggle::after {
  transform: translateY(-50%) rotate(180deg);
  border-top-color: #333;
}

聊天气泡

使用 ::before 或 ::after 伪元素制作小尾巴。

.chat-bubble::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 15px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid #dcf8c6;
}

加载动画

纯 CSS 实现的旋转加载器，性能优于 GIF。

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

常见问题与解决方案

1. 边缘锯齿：尝试给父容器加 transform: translateZ(0) 开启硬件加速，或使用带透明度的颜色值。
2. 带边框的三角形：使用两个三角形叠罗汉，外层大一点做边框色，内层小一点做背景色。
3. Flex 布局失效：确保显式设置 width: 0 和 height: 0，并添加 flex-shrink: 0。

// Sass Mixin 封装示例
@mixin triangle($direction, $size, $color) {
  width: 0;
  height: 0;
  @if $direction == 'up' {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size * 1.6 solid $color;
  } @else if $direction == 'down' {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size * 1.6 solid $color;
  }
}

进阶技巧

• 虚线/双线三角形：尝试 border-style: dashed 或 double。
• 组合使用：配合 clip-path 处理更复杂的裁剪需求。
• 图标按钮：用伪元素画图标，主容器放文字，结构清晰易维护。

总结

CSS 绘制图形方案轻量、易改、好维护，适合大多数简单场景。虽然代码可读性有时不如 SVG，但在性能和维护成本之间取得了良好平衡。掌握这些技巧能有效减少前端对图片资源的依赖，提升页面加载速度。