Skip to content

[css] 第65天 用CSS绘制一个红色的爱心 #300

New issue
New issue
Open
Open
[css] 第65天 用CSS绘制一个红色的爱心#300
Labels
csscss
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on Jun 19, 2019
Collaborator

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

Activity

haizhilin2013
added
csscss
on Jun 19, 2019
xn213

xn213 commented on Jun 20, 2019

@xn213
xn213
on Jun 20, 2019
// 用过 就给贴过来了
    .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

forever-z-133 commented on Jun 20, 2019

@forever-z-133
forever-z-133
on Jun 20, 2019

怎么不喜欢贴预览链接呢。
上面老哥的：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

Konata9 commented on Jul 12, 2019

@Konata9
Konata9
on Jul 12, 2019

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

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

Vi-jay

Vi-jay commented on Jul 31, 2019

@Vi-jay
Vi-jay
on Jul 31, 2019
.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

yangyingwx commented on Oct 27, 2020

@yangyingwx
yangyingwx
on Oct 27, 2020

第一反应是用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

jamsehua commented on Jan 12, 2021

@jamsehua
jamsehua
on Jan 12, 2021

第一反应是用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

很呆萌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    csscss

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@Konata9@forever-z-133@Vi-jay@yangyingwx

        Issue actions
          [css] 第65天 用CSS绘制一个红色的爱心 · Issue #300 · haizlin/fe-interview