Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
haizhilin2013 opened this issue Jun 19, 2019 · 6 comments
Open

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

haizhilin2013 opened this issue Jun 19, 2019 · 6 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第65天 用CSS绘制一个红色的爱心
@haizhilin2013 haizhilin2013 added the css css label Jun 19, 2019
@xn213
Copy link

xn213 commented 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
Copy link

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

Konata9 commented Jul 12, 2019

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

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

@Vi-jay
Copy link

Vi-jay commented 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
Copy link

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

第一反应是用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
Assignees
No one assigned
Labels
css css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@haizhilin2013 @Konata9 @forever-z-133 @Vi-jay @yangyingwx @xn213 @jamsehua