这里主要用到了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. 一次峰回路转的getshell

    扫目录发现 http://www.xxx.test.cn/bak/以及/bak/upload.jsp

  2. 关于Linux_监控系统资源/性能命令_vmstat

    (系统资源查看命令-vmstat[监控系统资源命令])          command:vmstat  [刷新延时 刷新次数]   分解解析: procs:进程信息字段:              ...

  3. 聊一聊 http2.0

    1. 我们认识http 协议,从最初的,客户端与服务器进行通讯,基于连接发生的请求与响应 在HTTP1.0时代,连接无法复用,每次下完单,都被强制登出/关机,下一次下单,就得重新登录. 为了解决htt ...

  4. 十二、SpringBoot 优雅的集成Spring Security

    前言 至于什么是Spring security ,主要两个作用,用户认证和授权.即我们常说的,用户只有登录了才能进行其他操作,没有登录的话就重定向到登录界面.有的用户有权限执行某一操作,而有的用户不能 ...

  5. B2C网站的系统

    管理系统 管理系统:主要做业务上的管理和内容输出,常见的有CMS(内容管理系统).CRM.SCM等, 1 供应商作为第三方,有独立开发的系统(SRM)和IO系统对接.以确定订单的状态.当然IO系统里面 ...

  6. vi总结的几个技巧

    1.用vi编辑完文件后 按两次Z可以直接保存退出2.在打开一个vi编辑时可以输入:sp /etc/passwd 同时打开另一个文件注意这里要用绝对路径

  7. MySQL高级学习笔记（六）：MySql锁机制

    文章目录 概述 定义 生活购物 锁的分类 从对数据操作的类型(读\写)分 从对数据操作的粒度分 三锁 表锁(偏读) 特点 案例分析 建表SQL 加读锁 加写锁 结论 如何分析表锁定 行锁(偏写) 特点 ...

  8. Eclipes 配置src.zip（查看源代码）

    接着将这些改变应用,重启eclipes即可.

  9. PAT甲级——A1153 DecodeRegistrationCardofPAT【25】

    A registration card number of PAT consists of 4 parts: the 1st letter represents the test level, nam ...

  10. 07、python的基础-->数据类型、集合、深浅copy

    一.数据类型 1.列表 lis = [11, 22, 33, 44, 55] for i in range(len(lis)): print(i) # i = 0 i = 1 i = 2 del li ...