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
随机推荐
- C++ 11 自旋锁
// Spin lock implementation. // BasicLockable. // Async-signal safe. // unlock() "synchronizes ...
- Python Twisted系列教程20: Twisted和Erlang
作者:dave@http://krondo.com/twisted-and-erlang/ 译者: Cheng Luo 你可以从”第一部分 Twist理论基础“开始阅读:也可以从”Twisted 入 ...
- Disconf实践指南:使用篇
在上一篇文章Disconf实践指南:安装篇介绍了如何在本地搭建Disconf环境,下面我们介绍如何在项目中使用Disconf.由于某些功能特性对源码做了修改,所以在官方文档并没有提及. 环境基于mac ...
- ftplib模块编写简单的ftp服务
from ftplib import * import os,readline import sys class MyFtp: ftp = FTP() #建立一个ftp对象的链接 '): #构造函数初 ...
- nginx作用
图解nginx作用:
- NetworkStream.write只能使用一次,后面再使用无效
public delegate void ShowMessageMethod2(TcpClient tc); private void ShowMessage2(TcpClient tc) { Str ...
- delphi IOS BLE 代理
代理方法 centralManagerDidUpdateState: peripheralManagerDidUpdateState:代理方法. centralManager:willRestoreS ...
- 我的Linux之路——windows10用WMware安装CentOS6.9 虚拟机详细步骤
出自:http://blog.51cto.com/13438667/2059926 一.安装环境 windows10操作系统物理机VMware Workstation 软件(可以在网上下载)CentO ...
- .net core 下的Area注册
app.UseMvc(routes => { routes.MapAreaRoute( name: "AreaRoute", areaName: "Admin&qu ...
- CBCentralManager Class 的相关分析
Overview 总体概述 CBCentralManager objects are used to manage discovered or connected remote peripheral ...