这里主要用到了before与after属性之前之后

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>画画</title>

        <style>

            #xing{

                width: 100px;

                height: 80px;

                position: relative;

            }

            #xing:before{

                content: "";

                width: 50px;

                height: 80px;

                display: block;

                position: absolute;

                left: 50%;

                background: #FF0000;

                border-radius: 25px 25px 0 0;

                transform: rotate(-45deg);

                transform-origin: 0 100%;

            }

            #xing:after{

                content: "";

                width: 50px;

                height: 80px;

                display: block;

                background: red;

                transform: rotate(45deg);

                border-radius: 25px 25px 0 0;

                transform-origin: 100% 100%;

            }

        </style>

    </head>

    <body>

        <!--

            描述：1.1、、心形

        -->

        <div id="xing">

        </div>

    </body>

</html>

CSS制作红桃心的更多相关文章

  1. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  2. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  3. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  4. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  5. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery & CSS 制作金属质感的选择按钮

    如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...

  7. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  8. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  9. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

随机推荐

  1. python用户名密码限定次数登录

    """ 1. 用户输入帐号密码进行登陆 2. 用户信息保存在文件内 3. 用户密码输入错误三次后锁定用户"""" test.txt ...

  2. SQL Join连接

    SQL 连接(Joins) SQL join 用于把来自两个或多个表的行结合起来. SQL JOIN SQL JOIN 子句用于把来自两个或多个表的行结合起来,基于这些表之间的共同字段. 最常见的 J ...

  3. SCP-bzoj-1079

    项目编号:bzoj-1079 项目等级:Safe 项目描述: 戳这里 特殊收容措施: DP.普通的状压状态数515,显然TLE+MLE,我们考虑把底数和幂换一换,压成155的状态数. 故状态设计为:f ...

  4. c#将数据导出到excel中

    DataTable   dt = new BLL.T_Expiry().GetAllList().Tables[0];//查询数据 string FileName = "T_Users.xl ...

  5. 【纯净软件】三款照片EXIF信息删除软件 Clear Exif、JPEG & PNG Stripper、Easy Exif Delete 非专业横向对比

    商业软件:需支付费用后方可使用. 共享软件:需支付费用,但可以先免费试用(有使用期限.功能限制). 免费软件:无需支付费用,无使用期限,无功能限制. 纯净软件:无广告.无联网行为的免费软件. 自由软件 ...

  6. Linux下的解压缩

    Linux下常见的压缩包格式有5种:zip tar.gz tar.bz2 tar.xz tar.Z 其中tar是种打包格式,gz和bz2等后缀才是指代压缩方式:gzip和bzip2 filename. ...

  7. es+mongodb 整合

    之前公司项目的数据都是从mysql查询,后面需求变更:同时技术上相应的也要改变策略,决定将mongodb和mysql的数据通过es建立索引来查询: 对于还没有接触或者真正了解es的可以先看一下相关Lu ...

  8. Codeforces 488C Fight the Monster

    Fight the Monster time limit per test             1 second                                   memory ...

  9. 我的scoi2018

    高一,很尴尬,凉~ -------- 大家好,我是分界线,我弱弱的说本次采用倒序的写作手法 -------- 故事是这样讲的: Day0: 刚刚去那个电科搞的集训,早上才考了一波模拟赛,下午就过来住酒 ...

  10. django 内置server 外网不能访问, 报连接超时

    按照官网教程,以 python manage.py runserver 其访问url为 http://127.0.0.1:8000,意味着只能本机访问,而我的django app 部署在 阿里云上面 ...