当前位置：首页 > CSS

css如何制作三角形

2026-03-31 21:54:17CSS

使用 border 属性制作三角形

通过设置元素的 border 属性，可以利用边框的斜切特性生成三角形。将一个元素的宽度和高度设为 0，然后为边框设置不同的颜色和宽度，通过透明化部分边框实现三角形效果。

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

调整三角形方向

通过控制不同方向边框的显隐，可以改变三角形的指向。例如，将 border-bottom 改为 border-top，三角形会朝下。

css如何制作三角形

.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid blue;
}

制作直角三角形

仅显示两个相邻边框，并将其中一个设为透明，可以生成直角三角形。

css如何制作三角形

.right-triangle {
  width: 0;
  height: 0;
  border-top: 100px solid green;
  border-right: 100px solid transparent;
}

使用 clip-path 制作复杂三角形

clip-path 属性允许通过多边形路径裁剪元素，适合生成更复杂的三角形或斜边效果。

.clip-triangle {
  width: 100px;
  height: 100px;
  background-color: orange;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

结合伪元素实现悬浮效果

通过 ::before 或 ::after 伪元素生成三角形，避免污染 DOM 结构，适合装饰性需求。

.tooltip {
  position: relative;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}