CSS 三角形和箭头示例

实心三角形

border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #3498db;

border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #e74c3c;

border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #2ecc71;

border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #f39c12;

边框三角形

/* 外层三角形 */
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #3498db;

/* 内层三角形 */
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;

/* 外层三角形 */
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #e74c3c;

/* 内层三角形 */
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;

/* 外层三角形 */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #2ecc71;

/* 内层三角形 */
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid white;

/* 外层三角形 */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #f39c12;

/* 内层三角形 */
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid white;

渐变三角形

background: linear-gradient(to bottom right,
  transparent 0%, transparent 50%,
  #9b59b6 50%, #9b59b6 100%);
transform: rotate(45deg) scale(0.8);
clip-path: polygon(0% 100%, 100% 100%, 50% 0%);

background: linear-gradient(to top left,
  transparent 0%, transparent 50%,
  #1abc9c 50%, #1abc9c 100%);
transform: rotate(45deg) scale(0.8);
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);

background: linear-gradient(to bottom right,
  transparent 0%, transparent 50%,
  #e67e22 50%, #e67e22 100%);
transform: rotate(-45deg) scale(0.8);
clip-path: polygon(100% 0%, 100% 100%, 0% 50%);

background: linear-gradient(to bottom left,
  transparent 0%, transparent 50%,
  #3498db 50%, #3498db 100%);
transform: rotate(45deg) scale(0.8);
clip-path: polygon(0% 0%, 0% 100%, 100% 50%);

箭头

/* 箭头杆 */
width: 30px;
height: 8px;
background-color: #3498db;

/* 箭头头 */
width: 15px;
height: 15px;
clip-path: polygon(0 0, 100% 50%, 0 100%);

/* 箭头杆 */
width: 30px;
height: 8px;
background-color: #e74c3c;

/* 箭头头 */
width: 15px;
height: 15px;
clip-path: polygon(100% 0, 0 50%, 100% 100%);

/* 箭头杆 */
width: 25px;
height: 2px;
background: #3498db;

/* 箭头头 */
width: 10px;
height: 10px;
border-right: 2px solid #3498db;
border-top: 2px solid #3498db;
transform: rotate(45deg);

/* 箭头杆 */
width: 25px;
height: 2px;
background: #e74c3c;

/* 箭头头 */
width: 10px;
height: 10px;
border-left: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
transform: rotate(45deg);

服务

纯CSS三角形与箭头生成器由北京德欧宝科技有限公司开发并运营，为用户提供免费的CSS代码生成服务。

声明

本工具生成的CSS代码仅供学习与开发参考，用户需自行测试兼容性（如旧版IE浏览器）；

北京德欧宝科技有限公司不对因代码使用导致的页面布局错乱、渲染异常或性能问题承担责任；

生成的图形设计需遵守版权法规，禁止直接复制受保护的设计元素。

建议

三角形生成原理：通过设置元素的width: 0; height: 0;，利用边框（border）拼接成三角形；

参数：调整border-width控制大小，修改border-color设置颜色。