CSS实现圆角三角形的详细指南

2023-11-22 02:24:27

圆角三角形简介

圆角三角形是一种常见的图形元素，广泛应用于网页设计和图形设计中。它可以作为装饰元素、导航元素、按钮等。圆角三角形可以具有一个或多个圆角，也可以是三个角都圆润的三角形。

实现圆角三角形

方法一：使用 CSS3 边框半径属性（适用于三个角都圆润的三角形）

HTML 代码：

<div class="triangle"></div>

CSS 代码：

.triangle {
  width: 100px;
  height: 100px;
  background-color: #f00;
  border-radius: 50%;
  transform: rotate(45deg);
}

方法二：使用 CSS3 伪元素和背景渐变（适用于具有一个或多个圆角的三角形）

HTML 代码：

<div class="triangle">
  <div class="triangle-inner"></div>
</div>

CSS 代码：

.triangle {
  width: 100px;
  height: 100px;
  position: relative;
}

.triangle-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent 50%, #f00 50%);
  transform: skewX(-45deg);
}

方法三：使用 CSS3 伪元素和多边形（适用于具有一个或多个圆角的三角形）

HTML 代码：

<div class="triangle"></div>

CSS 代码：

.triangle {
  width: 100px;
  height: 100px;
  position: relative;
}

.triangle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background-color: #f00;
}