利用 css 和 html 实现简单的双心

最新推荐文章于 2022-08-01 23:31:09 发布

YXB413

最新推荐文章于 2022-08-01 23:31:09 发布

阅读量247

点赞数

分类专栏： JavaScript css Demo

本文链接：https://blog.csdn.net/YXB413/article/details/90374949

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css Demo

1 篇文章 0 订阅

订阅专栏

以上是代码最终的实现效果

接下来的是这个小 Demo 的实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main {
            position: relative;
        }
        .one,.two{
            width:150px;
            height:220px;
            background: red;
            position: absolute;
            left:45%;
            margin-top:5%;
            transform: rotate(-45deg);
            border-top-left-radius: 45%;
            border-top-right-radius: 45%;
        }
        .two{
            left:55%;
        }
        .three{
            width:120px;
            height:120px;
            background: red;
            position: absolute;
            left:63.7%;
            margin-top:6.5%;
            transform: rotate(-45deg);
            border-top-right-radius: 45%;
            border-bottom-right-radius: 45%;
        }
        .line_1{
            position: absolute;
            height: 30px;
            width:70px;
            background: red;
            left:27%;
            margin-top:16%;
        }
        .line_2 {
            position: absolute;
            height: 12px;
            width:600px;
            background: red;
            left:32%;
            margin-top:16.6%;
        }
        .line_3 {
            position: absolute;
            height: 0px;
            width:0px;
            right:22.5%;
            margin-top:16%;
            border-style: solid;
            border-width: 0px 0px 30px 30px;
            border-color: transparent transparent red transparent;
            transform: rotate(-45deg);
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="line_1"></div>
        <div class="line_2"></div>
        <div class="line_3"></div>
    </div>
</body>
</html>

YXB413

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用 css 和 html 实现简单的双心

以上是代码最终的实现效果接下来的是这个小 Demo 的实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .main {...
复制链接

扫一扫

专栏目录