CSS一个div实现一个心形

最新推荐文章于 2023-10-13 09:34:29 发布

原创最新推荐文章于 2023-10-13 09:34:29 发布

· 1.7k 阅读

4 ·

版权

css 专栏收录该内容

6 篇文章

订阅专栏

这篇博客详细介绍了如何仅通过CSS来创建一个心形图案，适合前端开发者学习和提升CSS布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css

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

    .heart::after {
      left: 0;
      top: -50%;
    }