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

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

接下来的是这个小 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>

利用 css 和 html 实现简单的双心相关推荐

html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...
css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
CSS transform属性的简单应用——双开门动画效果
1.效果演示 CSS transform属性有许多效果,平移.旋转.缩放等. 这里简单应用平移效果,实现双开门动画,以下为效果图. 2.设计思路设置一张居中的需要隐藏的底图. 设置封面图,平分成左右 ...
利用css对shiny页面优化及利用htmlwidgets包创建HTML控件
内容来源:2017年5月20日,乐逗游戏高级数据分析师在"第十届中国R会议软件工具专场"进行<HTTPS最佳安全实践>演讲分享.IT大咖说作为独家视频合作方,经主办方和 ...
js锚点定位_overflow属性详解，利用CSS实现锚点定位
1.overflow的裁剪界线--border-box overflow属性用于指定块容器元素的内容溢出时的表现方式--滚动,裁剪,自适应."BFC的最佳结界"只是其衍生出来的特性 ...
技巧分享：如何利用CSS属性修改图片颜色？
熟悉前端开发的小伙伴肯定有遇到过这种情况,那就是需要给一个图标或者图片增加一个移动变色等属性,传统做法就是再添加一个颜色的图片文件替换,那么有没有可能直接利用css属性来变更颜色呢? 其实是可以实现的 ...
利用CSS让元素垂直居中的两种实现方法
利用CSS让元素垂直居中是个很头疼的问题,这里就介绍两种简单实用的方法方法一:利用行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之 ...
利用css transition属性实现一个带动画显隐的微信小程序部件
我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...
应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...

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

利用 css 和 html 实现简单的双心相关推荐

最新文章

热门文章