当前位置：首页 > CSS

css怎么制作心

2026-04-02 00:23:59CSS

使用CSS制作心形可以通过多种方法实现，以下是几种常见的实现方式：

使用伪元素和旋转

通过两个伪元素旋转45度形成一个心形：

css怎么制作心

.heart {
  position: relative;
  width: 100px;
  height: 90px;
}
.heart:before,
.heart:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
}
.heart:before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

使用CSS clip-path

通过clip-path属性直接裁剪出心形：

css怎么制作心

.heart {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: path(
    "M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z"
  );
}

使用border-radius和transform

结合border-radius和transform属性：

.heart {
  width: 50px;
  height: 50px;
  background-color: red;
  transform: rotate(45deg);
  position: relative;
}
.heart:before,
.heart:after {
  content: "";
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
}
.heart:before {
  top: -25px;
  left: 0;
}
.heart:after {
  top: 0;
  left: -25px;
}

使用SVG内联

直接在HTML中使用SVG绘制心形：

<svg width="100" height="100" viewBox="0 0 100 100">
  <path d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" fill="red"/>
</svg>

每种方法都有其优缺点，伪元素方法兼容性较好但代码较多，clip-path方法简洁但需要现代浏览器支持，SVG方法最灵活但需要额外标记。根据项目需求选择合适的方法。

标签: css