Code example of using CSS to draw a heart-CSS Tutorial-php.cn

Code example of using CSS to draw a heart

巴扎黑

Release： 2017-03-14 10:32:30

Original

5330 people have browsed it

Today Xiaoying will share with you a heart drawn with CSS. There is the code and production process at the bottom. I hope it will be helpful to everyone.

Step one:

First draw a square. As shown in the picture:

Code example of using CSS to draw a heart

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css画桃心</title>
    <style media="screen">
        .heart-body {
            width: 500px;
            margin: 100px auto;
            position: relative;
        }
        .heart-shape {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f70e0e;
        }
    </style>
</head>
<body>
    <p class="heart-body">
        <p class="heart-shape"></p>
    </p>
</body>
</html>

Copy after login

The second step:

will use the pseudo Elements before and :after, draw a square on the left and top of the square, and then use the border-radius: 50%; attribute , modify these two squares, and then get two circles, as shown in the picture:

Code example of using CSS to draw a heart

# #

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: &#39;&#39;;
            width: 100px;
            height: 100px;
            background-color: #ffc0cb;
        }
        .heart-shape:before {
            left: -45px;
        }
        .heart-shape:after {
            top: -45px;
        }

Copy after login

Use border-radius: 50%; Attribute:

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: &#39;&#39;;
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            /**兼容苹果；谷歌，等一些浏览器认*/
            -moz-border-radius: 50%;
            /**兼容火狐浏览器*/
            -o-border-radius: 50%;
            /**兼容opera浏览器*/
            border-radius: 50%;
            background-color: #ffc0cb;
        }

Copy after login

##Step 3:
The class name is: heart-shape p. Use the transform: rotate(45deg); attribute to rotate them 45 degrees, as shown in the figure:

Code example of using CSS to draw a heart

.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);
        }

Copy after login

Xiaoying did not give the round background color and the square background color the same color so that everyone can better see the obvious effect. Next, Xiaoying will Set the background color to uniform, and the final love will come out, as shown in the picture:

Code example of using CSS to draw a heart

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: &#39;&#39;;
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            /**兼容苹果；谷歌，等一些浏览器认*/
            -moz-border-radius: 50%;
            /**兼容火狐浏览器*/
            -o-border-radius: 50%;
            /**兼容opera浏览器*/
            border-radius: 50%;
            background-color: #f70e0e;
        }

Copy after login

As mentioned above This is a detailed explanation of the process of using CSS to draw hearts introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the Script House website!

The above is the detailed content of Code example of using CSS to draw a heart. For more information, please follow other related articles on the PHP Chinese website!