这里主要用到了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. Map、Filter和Reduce函数（Python）

    Map map(function_to_apply, list_of_inputs) 设有以下代码: >>> items = [1, 2, 3, 4, 5] >>> ...

  2. Flink(一)集群配置

    三台主机 centos6 已经完成的工作: 防火墙已关闭 主机名修改完毕,ssh免密登陆配置完成 jdk已安装 zookeeper已经部署并运行 hadoop已经部署并运行 版本:flink-1.8. ...

  3. MariaDB 删除表

    在本章中,我们将学习删除表. 表删除很容易,但记住所有删除的表是不可恢复的. 表删除的一般语法如下 - DROP TABLE table_name ; 存在执行表删除的两个选项:使用命令提示符或PHP ...

  4. python--表达式形式的yield、面向过程编程、内置函数

    yield的表达式形式 def init(func): def wrapper(*args, **kwargs): g = func(*args, **kwargs) next(g) return g ...

  5. php 后台转发和重定向的区别及kohana框架当前url加参数方式

    1.重定向是浏览器行为,浏览器地址有变化:转发是后台服务器完成, url地址不变化. 2.kohana获取URL 当前url是http://soyoung.kohana.com/blog/add?id ...

  6. if语句里面continue和break的区别

    break:结束整个循环体 continue:结束本次循环 代码说明: public static void main(String[] args) { int x=0; while(x++ < ...

  7. Dubbo入门到精通学习笔记（二十）：MyCat在MySQL主从复制的基础上实现读写分离、MyCat 集群部署(HAProxy + MyCat)、MyCat 高可用负载均衡集群Keepalived

    文章目录 MyCat在MySQL主从复制的基础上实现读写分离 一.环境 二.依赖课程 三.MyCat 介绍 ( MyCat 官网:http://mycat.org.cn/ ) 四.MyCat 的安装 ...

  8. 自定义npm命令行工具,并发布到www.npmjs.com

    1.自定义一个npm脚本 - 1.新建一个项目(在任何路径都可以); - 2.使用`npm init -y`初始化项目 - 3.新建一个index.js文件,在文件的第一行添加 `#!/usr/bin ...

  9. Java语言基础及java核心

    一.Java语言特点 1. 简单 2. 面向对象 3. 分布式 4. 健壮 5. 安全 6. 中性架构跨平台 7. 超强的可移植性 8. 高性能 9. 多线程 二.java的环境变量 JAVA_HOM ...

  10. Django框架（十八）—— CBV源码分析、restful规范、restframework框架

    目录 CBV源码分析.restful规范.restframework框架 一.CBV源码分析 1.url层的使用CBV 2.as_view方法 3.view方法 4.dispatch方法(可以在视图层 ...