css怎么绘制一个三角形

2024-10-10

891 字约 3 分钟

...

说在前面

🎈在CSS中画三角形通常利用border属性来实现，通过设置三个边的宽度为0，并为一个边提供颜色，结合transform属性进行旋转，可以创建一个三角形。以下是几种常见的CSS三角形的实现方法：

方法1：使用border

<div class="triangle"></div>
<style>
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent red transparent;
}
</style>

上面代码中，.triangle类创建了一个红色的三角形，其中border-width定义了三角形的三个宽度，最后一个宽度定义了三角形的底边，其他三个宽度设置为0，以形成三角形的尖角。border-color定义了三角形的颜色，除了底边颜色外，其他三个颜色设置为transparent（透明）。得到的三角形如下：

方法2：使用clip-path

<div class="triangle-clip"></div>
<style>
.triangle-clip {
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  height: 100px;
  width: 100px;
  background-color: red;
}
</style>

上面代码中，.triangle-clip类使用clip-path属性来裁剪元素，形成一个三角形。polygon函数定义了三角形的三个顶点。得到的三角形如下：

方法3：使用:before伪元素

<div class="triangle-before"></div>
<style>
.triangle-before::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent red transparent;
}
</style>

上面代码中，.triangle-before::before伪元素创建了一个红色的三角形，其中border-width定义了三角形的三个宽度，最后一个宽度定义了三角形的底边，其他三个宽度设置为0，以形成三角形的尖角。border-color定义了三角形的颜色，除了底边颜色外，其他三个颜色设置为transparent（透明）。得到的三角形如下：

方法4：使用::after伪元素

<div class="triangle-after"></div>
<style>
  .triangle-after::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 100px 50px;
    border-color: transparent transparent red transparent;
  }
</style>

上面代码中，.triangle-after::after伪元素创建了一个红色的三角形，其中border-width定义了三角形的三个宽度，最后一个宽度定义了三角形的底边，其他三个宽度设置为0，以形成三角形的尖角。border-color定义了三角形的颜色，除了底边颜色外，其他三个颜色设置为transparent（透明）。得到的三角形如下：

方法5：使用svg

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,0 100,100 0,100" fill="red" />
</svg>

得到的三角形如下：在上面代码中，SVG的poygon元素用于创建一个三角形，points属性定义了三角形的三个顶点。得到的三角形如下：

方法6：使用绝对定位+伪元素

<div class="position-triangle"></div>
<style>
.position-triangle {
  position: relative;
  overflow: hidden;
  height: 100px;
  width: 100px;
}
.position-triangle::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: red;
  transform: rotate(45deg);
  transform-origin: center;
  top: 50%;
}
</style>