Skip to content

css三角形原理

203字小于1分钟

2022-04-17

提问

  1. 如何用css画一个 三角形
  2. 原理是什么?

原理

由于 CSS 对于元素的边框,其相邻的边框的连接处,采用的是均分的处理方式,我们可以利用这个特性, 使用元素的边框,画一个三角形。

  • 将元素的display属性设置为 block 或 inline-block;
  • 宽高均设置为0;
  • 设置border-width为大于 1px 的值,border-style为 solid;
  • 设置 border-color, 仅保留一条边的颜色,其他边的颜色为透明
.demo {
  display: block;
  width: 0;
  height: 0;
  border-width: 30px;
  border-style: solid;
  border-color: transparent transparent blue transparent;
}
CSS三角形
<div class="triangle-demo"></div>
.triangle-demo {
  display: block;
  width: 0;
  height: 0;
  border-width: 30px;
  border-style: solid;
  border-color: transparent transparent cyan transparent;
}