最后一个 先放代码

<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. rownum, row_number(), rank() , dense_rank(), partition by ,max() keep 语句的区别与用法

    rownum,rownumber(), rank(),dense_rank()都是用来为记录分配序号的, rownum只能在orderby语句排完序后,在外层嵌套查询才能获得正确的行号,用起来相当复杂 ...

  2. Installation failed with message Failed to finalize session : INSTALL_FAILED_INVALID_APK: Split lib_slice_8_apk was defined multiple times. It is possible that this issue is resolved by uninstalling a

    取消:Instant Run就行

  3. leetcode278

    /* The isBadVersion API is defined in the parent class VersionControl. bool IsBadVersion(int version ...

  4. GNU/Linux操作系统总览

    计算机科学本科的专业课包括高等数学.离散数学.模拟电子技术.数字电子技术.微机原理.汇编语言原理.高级程序语言.操作系统原理.高级编译原理.嵌入式原理.网络原理.计算机组成与结构等诸多科目.GNU计算 ...

  5. 蓝桥杯算法训练 java算法 表达式求值

    问题描述 输入一个只包含加减乖除和括号的合法表达式,求表达式的值.其中除表示整除. 输入格式 输入一行,包含一个表达式. 输出格式 输出这个表达式的值. 样例输入 1-2+3*(4-5) 样例输出 - ...

  6. 【HDU1542】Atlantis

    题意 给出n个矩形的左下角和右上角的坐标,计算总的面积(相交部分只算一次). 分析 线段树扫描线的模板题. 将每个矩形都拆成上下两条线段,然后从下网上扫,当遇到底边时就加上这个区间,遇到顶边时,就减去 ...

  7. mysql oracle计算两点之间的距离

    mysql函数: SET FOREIGN_KEY_CHECKS=0; DROP FUNCTION IF EXISTS `getDistance`;DELIMITER ;;CREATE DEFINER= ...

  8. iOS中NSDate常用转换操作整合

    //当前时间格式化, 例:YYYY-MM-dd-EEEE-HH:mm:ss + (NSString *)getCurrentDataWithDateFormate:(NSString *)format ...

  9. CS API 测试2

    //删除数据中心 http://192.168.150.16:8900/client/api?command=deleteZone&id=c2d4f46a-51af-4806-8378-4b3 ...

  10. Windows下redis的安装与使用

    Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...