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
随机推荐
- 启动tomcat服务器,配置CATALINA_HOME和JAVA_HOME
遇到很多次运行startup.bat后,一个窗口一闪而过的问题,但是从来没去纠正怎样修改配置才是正确的,现在从网上查阅的资料整理如下:tomcat在启动时,会读取环境变量的信息,需要一个CATALIN ...
- 查看Android内存,cpu
转自https://testerhome.com/topics/2583 一.查看内存 查看Android应用内存: adb shell dumpsys meminfo 1.查看详细的内存: adb ...
- Julia - 字符串
字符 字符使用单引号括起来,字符是 32 位整数 julia> 'a' 'a': ASCII/Unicode U+0061 (category Ll: Letter, lowercase) ju ...
- 【Java】编程
3.Java I/O流输入输出,序列化,NIO,NIO.2 https://www.cnblogs.com/jiangwz/p/9193776.html 4.JAVA调用WCF(转) https:// ...
- 这样学Linux基本命令,事半功倍
命令基本格式 (1)命令提示符 如下是命令行的命令提示符,以此为例,讲解含义. 其中: root 当前登录用户名 localhost 主机名 ~ 当前所在的目录(即家目录,用户登录的初始位置) # 超 ...
- sysbench基准测试(2)——oltp.lua测试
前面知道sysbench基准测试的主要步骤为:prepare(准备数据集)→ run(运行测试)→ cleanup(清除数据集) 这一节介绍oltp.lua测试. oltp基准测试模拟了一个简单的事物 ...
- C#中 标识符“XXX”不符合 CLS
标识符“XXX”不符合 CLS,意思是只要是不与外面有接口,比如在私有函数中操作,可是使用一些不符合cls的类型,但是如果是公共的,就必须要符合这个规范. 解决方法是,将这个类中的这些public类型 ...
- 字符编码 ASCII,Unicode和UTF-8的关系
转自:http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143166410626 ...
- Redis作为缓存服务器
1.ICache的Redis实现没有放在'Framework.Cache/Logic'中.如果是以前,我会认为这样不好.我会这样做,'Framework.Cache'项目引用Redis项目或直接从Nu ...
- Java Socket编程之UDP
UDP编程: 将要传输的数据定义成数据包(Datagram),在数据报中指明所要到达的Socket(主机地址和端口号),然后再将数据报发送出去. 相关操作类: DatagramPacket ...