Fe-interview: [css] 第65天 用CSS绘制一个红色的爱心

[haizhilin2013]

第65天 用CSS绘制一个红色的爱心

[xn213]

// 用过 就给贴过来了
    .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%;
    }

[forever-z-133]

怎么不喜欢贴预览链接呢。
上面老哥的：https://codepen.io/foreverZ133/pen/XLpJdK
用镂空图的：https://codepen.io/foreverZ133/pen/RzKNZB
用 box-shadow 的：https://wow.techbrood.com/fiddle/27194
用 SVG 的：https://wow.techbrood.com/fiddle/36760
仅拓展思路，不见得项目中会这样玩。

[Konata9]

与前面老哥的思路一样，用了两个 div 做的。利用 rotate 和 translate 进行位置的调整。

https://codepen.io/Konata9/pen/wLZvOj?editors=1100

[Vi-jay]

.heart {
      width: 100px;
      height: 100px;
      position: relative;
      margin-left: 50px;
      &:before, &:after {
        position: absolute;
        width: 50%;
        height: 100%;
        content: "";
        display: inline-block;
        background: red;
        transform: rotateZ(45deg);
        transform-origin: 0 100%;
        border-radius: 25px 25px 0 0;
        left: 0;
      }
      &:before{
        left: 20%;
        transform: rotateZ(-45deg);
        transform-origin: 100% 100%;
      }
    }

[yangyingwx]

第一反应是用border-radius可以实现

<div class="love div1"></div>
<div class="love div2"></div>

.love{
  width: 50px;
  height:100px;
  background: pink;
  float:left;
}
.div1 {
  border-radius: 50%  50% 0 100%/ 30% 30% 0 70%;
}
.div2{
  border-radius: 50% 50% 100% 0/30% 30% 70% 0
}

丑丑的效果图：
https://codepen.io/yyangying/pen/oNLZrvx

[jamsehua]

第一反应是用border-radius可以实现

<div class="love div1"></div>
<div class="love div2"></div>

.love{
  width: 50px;
  height:100px;
  background: pink;
  float:left;
}
.div1 {
  border-radius: 50%  50% 0 100%/ 30% 30% 0 70%;
}
.div2{
  border-radius: 50% 50% 100% 0/30% 30% 70% 0
}

丑丑的效果图：
https://codepen.io/yyangying/pen/oNLZrvx

很呆萌