• 技术文章 >web前端 >css教程

    css怎么实现心形

    青灯夜游青灯夜游2021-07-22 15:23:42原创88

    css实现心形的方法:首先利用“border-radius:100%”样式画两个正圆;然后进行定位,将两个圆重合一部分;接着画一个正方形,进行定位,将正方形与两个圆重合一部分,形成一个倾斜的心形;最后使用transform样式调整爱心角度。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    前期预备知识:

    话不多说,先教大家怎么用css画一个圆形。

    .disc1{
        width: 100px;
        height: 100px;
        border:1px solid red;
        background-color: red;
        margin:300px 0px 0px 300px;
        border-radius:100%;
        float:left;
    }

    1.png

    由于我们的爱心是由两个圆和一个正方形组成的,所以我们还需要再来一个圆形。

    .disc2{
        width: 100px;
        height: 100px;
        border:1px solid red;
        background-color: red;
        margin:250px 0px 0px 0px;
        border-radius:100%;
        float:left;
        position: relative;
        right: 50px;
    }

    2.png

    第三步我们就需要做一个正方形了。

    .square{
        width: 100px;
        height: 100px;
        border:1px solid red;
        background-color: red;
        margin: 300px 0px 0px 0px;
        float: left;
        position: relative;
        right: 152px;
    }

    2-1.png

    做完这些的效果已经基本上出来了,但是我们还需要调整一下爱心的角度,这时就需要用到我们css样式中的transform中的rotate属性了。

    我们由于需要把三个div都旋转角度,所以我们把这三个div放在一个div里面。具体代码如下:

    .main{
        transform: rotate(45deg);
        margin: 300px;
    }

    做到现在,我们的爱心就已经做出来咯。效果图如下:

    3.png

    全部代码如下(包含HTML代码和CSS代码)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <style>
    			*{
    			    margin: 0px;
    			    padding: 0px;
    			}
    			.main{
    			    transform: rotate(45deg);
    			    margin: 300px;
    			}
    			.disc1{
    			    width: 100px;
    			    height: 100px;
    			    border:1px solid red;
    			    background-color: red;
    			    margin:300px 0px 0px 300px;
    			    border-radius:100%;
    			    float:left;
    			}
    			.disc2{
    			    width: 100px;
    			    height: 100px;
    			    border:1px solid red;
    			    background-color: red;
    			    margin:250px 0px 0px 0px;
    			    border-radius:100%;
    			    float:left;
    			    position: relative;
    			    right: 50px;
    			}
    			.square{
    			    width: 100px;
    			    height: 100px;
    			    border:1px solid red;
    			    background-color: red;
    			    margin: 300px 0px 0px 0px;
    			    float: left;
    			    position: relative;
    			    right: 152px;
    			}
    		</style>
        </head>
        <body>
            <div class="main">
                <div class="disc1"></div>
                <div class="disc2"></div>
                <div class="square"></div>
            </div>
        </body>
    </html>

    (学习视频分享:css视频教程

    以上就是css怎么实现心形的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 心形
    上一篇:css背景图片颜色怎么设置 下一篇:css怎么实现两列布局
    VIP会员

    相关文章推荐

    • css怎么实现波浪线边框• css怎么实现不透明度渐变• css高度设置百分比不生效怎么办• css背景图片颜色怎么设置• JavaScript怎么给CSS加样式

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网