CSS 形状绘制
最后一个 先放代码
<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 形状绘制的更多相关文章
- 45个值得收藏的 CSS 形状
摘要: CSS炫技. 原文:45个值得收藏的 CSS 形状 作者:前端小智 Fundebug经授权转载,版权归原作者所有. CSS能够生成各种形状.正方形和矩形很容易,因为它们是 web 的自然形状. ...
- 炫酷的 CSS 形状(值得收藏)
在今日头条中看到炫酷的 CSS 形状,就记录一下: 1.圆形 #circle { width: 100px; height: 100px; background: red; border-radius ...
- CSS - Tooltip-arrow 绘制三角形
问题:纯CSS实现bubble的三角形部分 方法:使用border来绘制三角形:例如 .trangle { ; border-color: transparent; border-style: sol ...
- 【基础】在css中绘制三角形及相关应用
简言 本文简要阐述了用CSS边框的方法在页面上绘制三角形,包括几种典型的三角形绘制,还介绍了几个简单的应用场景.利用边框绘制三角形方法只是众多方案中的一种,大家根据项目实际,选用最适宜项目的方案. 1 ...
- 神奇的CSS形状
在StackOverflow上有这么一个问题,有位同学在 http://css-tricks.com/examples/ShapesOfCSS/ 找到一些使用CSS做的形状,其中一位同学对下面的这个形 ...
- css三角形绘制
三角形演变: 1.将一个块元素的宽.高都设置为0,再设置边框样式,得如下效果图(绿色部分): 样式: {;;border: 35px solid #7de87d;} 通过此样式得到的是一个正方形. 2 ...
- CSS属性绘制图形(一)
div部分: <div class="react-logo"> <div class="reactive"></div> & ...
- 不需要图片,css+svg绘制动态loading加载图标
1.html 部分: <div id="refershDiv" class="refershDiv"> <svg xmlns="ht ...
- css形状大全
转至:http://blog.sina.com.cn/s/blog_4abb9bba0101acsx.html
随机推荐
- rownum, row_number(), rank() , dense_rank(), partition by ,max() keep 语句的区别与用法
rownum,rownumber(), rank(),dense_rank()都是用来为记录分配序号的, rownum只能在orderby语句排完序后,在外层嵌套查询才能获得正确的行号,用起来相当复杂 ...
- 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就行
- leetcode278
/* The isBadVersion API is defined in the parent class VersionControl. bool IsBadVersion(int version ...
- GNU/Linux操作系统总览
计算机科学本科的专业课包括高等数学.离散数学.模拟电子技术.数字电子技术.微机原理.汇编语言原理.高级程序语言.操作系统原理.高级编译原理.嵌入式原理.网络原理.计算机组成与结构等诸多科目.GNU计算 ...
- 蓝桥杯算法训练 java算法 表达式求值
问题描述 输入一个只包含加减乖除和括号的合法表达式,求表达式的值.其中除表示整除. 输入格式 输入一行,包含一个表达式. 输出格式 输出这个表达式的值. 样例输入 1-2+3*(4-5) 样例输出 - ...
- 【HDU1542】Atlantis
题意 给出n个矩形的左下角和右上角的坐标,计算总的面积(相交部分只算一次). 分析 线段树扫描线的模板题. 将每个矩形都拆成上下两条线段,然后从下网上扫,当遇到底边时就加上这个区间,遇到顶边时,就减去 ...
- mysql oracle计算两点之间的距离
mysql函数: SET FOREIGN_KEY_CHECKS=0; DROP FUNCTION IF EXISTS `getDistance`;DELIMITER ;;CREATE DEFINER= ...
- iOS中NSDate常用转换操作整合
//当前时间格式化, 例:YYYY-MM-dd-EEEE-HH:mm:ss + (NSString *)getCurrentDataWithDateFormate:(NSString *)format ...
- CS API 测试2
//删除数据中心 http://192.168.150.16:8900/client/api?command=deleteZone&id=c2d4f46a-51af-4806-8378-4b3 ...
- Windows下redis的安装与使用
Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...