巧夺天工：CSS 实现带圆角三角形，圆润之美尽在指尖

2023-10-14 11:06:56

圆润之美的实现之旅

CSS，作为前端开发中不可或缺的工具，总能为我们带来惊喜和无限可能。今天，我们要探索如何使用纯 CSS 实现带圆角三角形，让你的设计脱颖而出。

传统的 CSS 三角形实现方法，大多是利用边框来制作，但这种方法往往会导致三角形顶端过于尖锐，无法达到圆润的效果。而今天介绍的方法，将打破这一局限，为你呈现更为圆润、更为柔和的三角形。

圆角三角形的秘密武器：伪元素

伪元素是 CSS 中的强大工具，它允许我们在 HTML 元素中创建虚拟的元素，而这些虚拟元素可以拥有自己的样式。在实现圆角三角形时，伪元素将发挥至关重要的作用。

首先，我们需要使用伪元素创建一个父元素，然后在这个父元素中再创建一个子元素。子元素将作为三角形的本体，而父元素将负责添加圆角效果。

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

.rounded-triangle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f00;
  border-radius: 50%;
}

.rounded-triangle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: #00f;
}