html语言怎么打出红色心形,使用HTML-CSS画爱心的过程详解

如何使用HTML-CSS来画出一个爱心呢，下面我就教大家使用HTML-CSS画爱心的方法。

第一步：

先画一个正方形。如图：

css画桃心

.heart-body {

width: 500px;

margin: 100px auto;

position: relative;

}

.heart-shape {

position: relative;

width: 100px;

height: 100px;

background-color: #f70e0e;

}

第二步：

将利用伪元素before和 :after，在正方形的左边和上边各画一个正方形，然后再利用border-radius: 50%;属性，修饰下这两个正方形，然后就得到了两个圆,如图所示：

.heart-shape:before,

.heart-shape:after {

position: absolute;

content: '';

width: 100px;

height: 100px;

background-color: #ffc0cb;

}

.heart-shape:before {

left: -45px;

}

.heart-shape:after {

top: -45px;

}

利用border-radius: 50%; 属性：

.heart-shape:before,

.heart-shape:after {

position: absolute;

content: '';

width: 100px;

height: 100px;

-webkit-border-radius: 50%;

/**兼容苹果；谷歌，等一些浏览器认*/

-moz-border-radius: 50%;

/**兼容火狐浏览器*/

-o-border-radius: 50%;

/**兼容opera浏览器*/

border-radius: 50%;

background-color: #ffc0cb;

}

第三步：

类名为：heart-shape的div 利用transform: rotate(45deg); 属性将他们旋转45度，如图所示：

.heart-shape {

position: relative;

width: 100px;

height: 100px;

background-color: #f70e0e;

-webkit-transform: rotate(45deg);

/* Safari 和 Chrome */

-moz-transform: rotate(45deg);

/* Firefox */

-ms-transform: rotate(45deg);

/* IE 9 */

-o-transform: rotate(45deg);

/* Opera */

transform: rotate(45deg);

}

我把圆的背景色和正方形的背景色没给统一的颜色，是为了大家更好的看到明显的效果图，接下来我将其背景色设置成统一的，最终的爱心就出来了，如图所示：

.heart-shape:before,

.heart-shape:after {

position: absolute;

content: '';

width: 100px;

height: 100px;

-webkit-border-radius: 50%;

/**兼容苹果；谷歌，等一些浏览器认*/

-moz-border-radius: 50%;

/**兼容火狐浏览器*/

-o-border-radius: 50%;

/**兼容opera浏览器*/

border-radius: 50%;

background-color: #f70e0e;

}

以上所述是我给大家介绍的使用CSS画爱心的过程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，我会及时回复大家的。在此也非常感谢大家对莫愁个人博客的支持！