最后一个 先放代码

<style type="text/css">
#heart {
position: relative;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 70px; top: 0;
width: 70px;
height: 115px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
</style>

  

 

CSS 形状绘制的更多相关文章

  1. 45个值得收藏的 CSS 形状

    摘要: CSS炫技. 原文:45个值得收藏的 CSS 形状 作者:前端小智 Fundebug经授权转载,版权归原作者所有. CSS能够生成各种形状.正方形和矩形很容易,因为它们是 web 的自然形状. ...

  2. 炫酷的 CSS 形状(值得收藏)

    在今日头条中看到炫酷的 CSS 形状,就记录一下: 1.圆形 #circle { width: 100px; height: 100px; background: red; border-radius ...

  3. CSS - Tooltip-arrow 绘制三角形

    问题:纯CSS实现bubble的三角形部分 方法:使用border来绘制三角形:例如 .trangle { ; border-color: transparent; border-style: sol ...

  4. 【基础】在css中绘制三角形及相关应用

    简言 本文简要阐述了用CSS边框的方法在页面上绘制三角形,包括几种典型的三角形绘制,还介绍了几个简单的应用场景.利用边框绘制三角形方法只是众多方案中的一种,大家根据项目实际,选用最适宜项目的方案. 1 ...

  5. 神奇的CSS形状

    在StackOverflow上有这么一个问题,有位同学在 http://css-tricks.com/examples/ShapesOfCSS/ 找到一些使用CSS做的形状,其中一位同学对下面的这个形 ...

  6. css三角形绘制

    三角形演变: 1.将一个块元素的宽.高都设置为0,再设置边框样式,得如下效果图(绿色部分): 样式: {;;border: 35px solid #7de87d;} 通过此样式得到的是一个正方形. 2 ...

  7. CSS属性绘制图形(一)

    div部分: <div class="react-logo"> <div class="reactive"></div> & ...

  8. 不需要图片,css+svg绘制动态loading加载图标

    1.html 部分: <div id="refershDiv" class="refershDiv"> <svg xmlns="ht ...

  9. css形状大全

    转至:http://blog.sina.com.cn/s/blog_4abb9bba0101acsx.html

随机推荐

  1. C++ 11 自旋锁

    // Spin lock implementation. // BasicLockable. // Async-signal safe. // unlock() "synchronizes ...

  2. Python Twisted系列教程20: Twisted和Erlang

    作者:dave@http://krondo.com/twisted-and-erlang/  译者: Cheng Luo 你可以从”第一部分 Twist理论基础“开始阅读:也可以从”Twisted 入 ...

  3. Disconf实践指南:使用篇

    在上一篇文章Disconf实践指南:安装篇介绍了如何在本地搭建Disconf环境,下面我们介绍如何在项目中使用Disconf.由于某些功能特性对源码做了修改,所以在官方文档并没有提及. 环境基于mac ...

  4. ftplib模块编写简单的ftp服务

    from ftplib import * import os,readline import sys class MyFtp: ftp = FTP() #建立一个ftp对象的链接 '): #构造函数初 ...

  5. nginx作用

    图解nginx作用:

  6. NetworkStream.write只能使用一次,后面再使用无效

    public delegate void ShowMessageMethod2(TcpClient tc); private void ShowMessage2(TcpClient tc) { Str ...

  7. delphi IOS BLE 代理

    代理方法 centralManagerDidUpdateState: peripheralManagerDidUpdateState:代理方法. centralManager:willRestoreS ...

  8. 我的Linux之路——windows10用WMware安装CentOS6.9 虚拟机详细步骤

    出自:http://blog.51cto.com/13438667/2059926 一.安装环境 windows10操作系统物理机VMware Workstation 软件(可以在网上下载)CentO ...

  9. .net core 下的Area注册

    app.UseMvc(routes => { routes.MapAreaRoute( name: "AreaRoute", areaName: "Admin&qu ...

  10. CBCentralManager Class 的相关分析

    Overview 总体概述 CBCentralManager objects are used to manage discovered or connected remote peripheral ...