CSS 边框绘制圆形与三角形实战技巧 | 极客日志

HTML / CSS大前端

CSS 边框绘制圆形与三角形实战技巧

利用 CSS 边框（border）属性绘制几何图形的原理与技巧。通过设置宽高为 0 并调整边框颜色与透明度，可实现三角形绘制；利用 border-radius 可轻松创建圆形及椭圆。文章涵盖了基础用法、进阶变形、阴影处理方案以及在实际 UI 组件（如下拉菜单、聊天气泡）中的应用场景，同时对比了 CSS 绘图与图片/SVG 的优劣，提供了兼容性处理建议。

监控大屏发布于 2026/4/5更新于 2026/4/131 浏览

CSS 边框绘制圆形与三角形实战技巧

CSS 边框绘制圆形与三角形实战技巧

原理概述

在开发中，经常需要纯 CSS 绘制几何图形。浏览器渲染边框时，四个方向的边框在角上其实是斜着拼起来的，这为利用边框属性绘制图形提供了可能。

简单来说，给一个 div 设置四个不同颜色的边框，中间是空的，会看到四个梯形围成一个小方块。只要把宽高设为 0，再操控 border 的粗细和颜色，就能凭空变出三角形、梯形甚至平行四边形。

/* 基础示例：展示边框拼接效果 */
.geometry-reveal {
  width: 100px;
  height: 100px;
  border-top: 40px solid #FF6B6B;
  border-right: 40px solid #4ECDC4;
  border-bottom: 40px solid #45B7D1;
  border-left: 40px solid #96CEB4;
  background: transparent;
}

将宽高都设为 0，四个等腰直角三角形会拼成一个正方形。此时若将其中三个边框的颜色改为 transparent，剩下的就是一个完美的三角形。

/* 见证奇迹的时刻 */
.magic-zero {
  width: 0;
  height: 0;
  border-top: 50px solid #FF6B6B;
  border-right: 50px solid #4ECDC4;
  border-bottom: 50px solid #45B7D1;
  border-left: 50px solid #96CEB4;
}

绘制圆形

想要正圆？直接 border-radius: 50%，只要容器是正方形，立马圆润起来。

/* 基础圆 */
 {
  : ;
  : ;
  : (,  ,  );
  : ;
}


 {
  : ;
  : ;
  : ;
  : ;
}


 {
  : ;
  : ;
  : (to right,  ,  );
  :  / ;
}

极客日志微信公众号二维码

更多推荐文章

相关免费在线工具

Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online
Markdown 转 HTML
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。在线工具，Markdown 转 HTML在线工具，online
HTML 转 Markdown
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。在线工具，HTML 转 Markdown在线工具，online
JSON 压缩
通过删除不必要的空白来缩小和压缩JSON。在线工具，JSON 压缩在线工具，online
JSON美化和格式化
将JSON字符串修饰为友好的可读格式。在线工具，JSON美化和格式化在线工具，online

/* 胶囊形状 */
.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%; }
}

/* 四大基础方向 */
.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;
}

/* 锐利的角，不等边三角形 */
.sharp-triangle {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 100px solid #34495e;
}

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

/* 错误示范：阴影作用在看不见的盒子上 */
.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));
}

.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;
}

.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;
}

/* 带边框的气泡需两层叠罗汉 */
.chat-bubble-right-with-border::before {
  content: '';
  position: absolute;
  right: -11px;
  top: 15px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid #e0e0e0;
  z-index: -1;
}

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

.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); }
}

.anti-aliased-triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #3498db;
  transform: translateZ(0);
}

.bordered-triangle-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
}

.bordered-triangle-outer {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  border-bottom: 82px solid #2c3e50;
  top: 0;
  left: 0;
  z-index: 1;
}

.bordered-triangle-inner {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #3498db;
  top: 1px;
  left: 2px;
  z-index: 2;
}

.flex-triangle {
  width: 0 !important;
  height: 0 !important;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #e74c3c;
  flex-shrink: 0;
}

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

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

.hybrid-shape {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  border-radius: 20px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.icon-btn.play::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid white;
}