教你用css3实现心形

首先,添加一个 <div>元素作为我们的心形状的基础。

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

然后，我们创建宽度和高度。

.heart-shape{
 position: relative;
 width: 200px;
 height: 200px;
 background-color: rgba(250,184,66, 0.8);
 }

我们将利用伪元素before和 :after。第一次设置 :before伪元素作为我们的第一个循环。我们使它成为一个同样大小的宽度和高度,就像我们div。然后,我们把它变成一圈用border - radius 50%和把它放在左边。

.heart-shape:before{

    position: absolute;

    bottombottom: 0px;

    left: -90px;

    width: 200px;

    height: 200px;

    content: '';

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -o-border-radius: 50%;

    border-radius: 50%;

    background-color: rgba(250,184,66, 0.8);

}

之后,我们与伪元素创建第二个圈 :after与我们第一圈一样的风格。然后放在顶部位置。

 
 .heart-shape:after{

    position: absolute;

    top: -90px;

    rightright: 0px;

    width: 200px;

    height: 200px;

    content: '';

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -o-border-radius: 50%;

    border-radius: 50%;

    background-color: rgba(250,184,66, 0.8);

}

我们可以把这两个相同风格的伪元素选择器分组如下:

.heart-shape:before,

.heart-shape:after{

    position: absolute;

    width: 200px;

    height: 200px;

    content: '';

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -o-border-radius: 50%;

    border-radius: 50%;

    background-color: rgba(250,184,66, 0.8);

}

.heart-shape:before{

    bottombottom: 0px;

    left: -90px;

}

.heart-shape:after{

    top: -90px;

    rightright: 0px;

}

这些都准备的差不多了，现在就用CSS3装换

在HTML中心形的完整代码如下：

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

.heart-shape{

    position: relative;

    margin:100px auto;

    width: 200px;

    height: 200px;

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

    background-color: rgba(250,184,66, 1);

}

.heart-shape:before,

.heart-shape:after{

    position: absolute;

    width: 200px;

    height: 200px;

    content: '';

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -o-border-radius: 50%;

    border-radius: 50%;

    background-color: rgba(250,184,66, 1);

}

.heart-shape:before{

    bottom: 0px;

    left: -90px;

}

.heart-shape:after{

    top: -90px;

    right: 0px;

}

本文作者： Mrcxt
查看更多内容： 进入Mrcxt的wordpress博客