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

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>画画</title>
  6.         <style>
  7.  
  8.             #xing{
  9.  
  10.                 width: 100px;
  11.                 height: 80px;
  12.                 position: relative;
  13.             }
  14.  
  15.             #xing:before{
  16.                 content: "";
  17.                 width: 50px;
  18.                 height: 80px;
  19.                 display: block;
  20.                 position: absolute;
  21.                 left: 50%;
  22.                 background: #FF0000;
  23.                 border-radius: 25px 25px 0 0;
  24.  
  25.                 transform: rotate(-45deg);
  26.                 transform-origin: 0 100%;
  27.             }
  28.  
  29.             #xing:after{
  30.                 content: "";
  31.                 width: 50px;
  32.                 height: 80px;
  33.                 display: block;
  34.                 background: red;
  35.                 transform: rotate(45deg);
  36.                 border-radius: 25px 25px 0 0;
  37.                 transform-origin: 100% 100%;
  38.             }
  39.  
  40.         </style>
  41.     </head>
  42.     <body>
  43.         <!--
  44.  
  45.             描述：1.1、、心形
  46.         -->
  47.  
  48.         <div id="xing">
  49.  
  50.         </div>
  51.  
  52.     </body>
  53. </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. 测试demo 配置

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  2. qt学习（三）：鼠标图标改变

    qt学习 (三):鼠标图标改变 当你进入一个美好的qt软件场景,比如游戏,电脑的黑白图标会让程序逊色不少, 1改图标要加光标的头文件, 2 载入光标图, 3 再设置改光标就可以了 1在头文件中加 #i ...

  3. mysql中int的长度与值的问题

    我们在数据库中设置一个int类型,设置好长度,然后会发现并没有受到长度的限制,这是因为,int值的范围和这个长度根本没有关系. int的存储大小是4个字节(B), 计算机存储单位的换算: 1B=8b ...

  4. ZROI week6

    ZROI week6 T1 用一个类似背包的东西记录答案. T2 好像直接用|操作即可. T3 瞎搞就完事了 T4 启发式合并,然而变量写错了,就没了... 总结 100 + 100 + 100 + ...

  5. IDEA的骚操作

    1.var声明 "jack".var ==>final String name = "jack"; 2.null判空 user.null==>if( ...

  6. windows7+tomcat7+nginx1.11.3 +memcached

    测试的环境是windows7+tomcat7+nginx1.11.3 +memcached 安装方法网上很多就不多说了. 1.session共享需要这几个jar 包  下载地址 http://down ...

  7. Golang 开发技能图谱

    # Golang 开发技能图谱 ## Go 语言环境搭建- Go 安装- GOPATH 与工作空间- Go 命令- Go开发工具 ## GO 语言编程基础- 关键词和语法(Language Synta ...

  8. Centos6下实现Nginx+Tomcat实现负载均衡及监控

    在性能测试过程中,我们可能会关注很多指标,比如CPU.IO.网络.磁盘等,通过这些指标大致可以判断哪个环节遇到了性能瓶颈,但是当这些指标无法判断出性能瓶颈时,我们可能就需要对一些中间件进行监控,比如N ...

  9. 接口自动化测试框架-AIM2.0

    跳转到3.0版本https://www.cnblogs.com/df888/p/12031649.html AIM是我用python搭建的第一款接口自动化测试框架,随着技术的提升,框架也在升级,故有了 ...

  10. C++基础知识随记

    一.什么情况必须使用初始化列表的方式声明构造函数? 1.包含常量类型的成员 2.包含引用类型的成员 3.包含没有默认构造函数的类类型成员 4.优点:对于包含有类类型成员的类来说,省去了调用一次默认构造 ...