css 三角

作者：浪推晚风发布日期:2026-03-13 浏览:47

/* 使用 CSS 创建一个三角形 */
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent; /* 左边的透明边框 */
  border-right: 50px solid transparent; /* 右边的透明边框 */
  border-bottom: 100px solid red; /* 底边的颜色和高度决定了三角形的大小和颜色 */
}

解释说明：

width: 0 和 height: 0：将元素的内容区域设置为零，使其不显示内容。
border-left 和 border-right：通过设置左右两边为透明边框，只保留底部边框的颜色，形成三角形的效果。
border-bottom：定义了三角形的底边，颜色和高度决定了三角形的大小和颜色。

上一篇：css 字体居中

下一篇：css transform translate