美文网首页
用css实现爱心❤

用css实现爱心❤

作者: 陌上桑_浅 | 来源:发表于2019-07-08 18:05 被阅读0次

    html代码

    <div class="heart"></div>
    

    css

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

    效果

    图片.png

    相关文章

      网友评论

          本文标题:用css实现爱心❤

          本文链接:https://www.haomeiwen.com/subject/izvahctx.html