这里主要用到了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. ThreadLocal内存泄漏

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11421437.html 内存泄漏 内存泄漏是指不再使⽤的对象⽆法得到及时的回收,持续占⽤内存空间,从⽽ ...

  2. 【leetcode】926.Flip String to Monotone Increasing

    题目如下: A string of '0's and '1's is monotone increasing if it consists of some number of '0's (possib ...

  3. 工程师技术(四)：配置SMB文件夹共享、多用户Samba挂载、普通NFS共享的实现、安全NFS共享的实现

    一.配置SMB文件夹共享 目标: 本例要求在虚拟机 server0 上发布两个共享文件夹,具体要求如下: 1> 此服务器必须是 STAFF 工作组的一个成员   2> 发布目录 /comm ...

  4. MySQL 5.7配置文件

    原文:http://www.voidcn.com/article/p-zrikccdi-hr.html # MySql5.7配置文件my.cnf设置[client]port = 3306socket ...

  5. EFK搜集MySQL慢日志

    前提已经安装好EFK 1.在MySQL节点安装td-agent http://packages.treasuredata.com.s3.amazonaws.com/3/redhat/7/x86_64/ ...

  6. C语言中#和##的作用

    使用#把宏参数变为一个字符串,用##把两个宏参数贴合在一起. #include <stdio.h> #define STR1(x) #x//使x成为字符串 #define STR2(x, ...

  7. JVM运行时数据区及对象在内存中初始化的过程

    JVM运行时数据区 Java虚拟机所管理的内存区域,也称为运行时数据区,分为以下几个运行时数据区,如图所示 程序计数器:当前程序所执行字节码的行号指示器 程序计数器(Program Counter R ...

  8. UVA_548Tree

    这是一个很经典的建树,然而当时不会!!!! 给你一个中序和后序 先建一个二叉树,然后找最优解(最优解就是一个叶子节点到根节点权值最小, 同时本身权值最小) //生成一棵树 int build(int ...

  9. html5中的拖拽功能

    拖拽元素支持的事件 ondrag 应用于拖拽元素,整个拖拽过程都会调用 ondragstart 应用于拖拽元素,当拖拽开始时调用 ondragleave 应用于拖拽元素,当鼠标离开拖拽元素是调用 on ...

  10. linux下载文件到本地

    使用XShell工具 1.首先虚拟机要联网 2.服务器要安装了rz,sz yum install lrzsz 运行rz,会将windows的文件传到linux服务器   运行sz filename,会 ...