☀【CSS3】形状
CSS3shapes
http://www.css3shapes.com/
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
#circle {
margin: 50px;
width: 140px;
height: 140px;
background: red;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
#square {
margin: 50px;
width: 140px;
height: 140px;
background: blue;
}
#oval {
margin: 50px;
width: 200px;
height: 100px;
background: purple;
-moz-border-radius: 100px / 50px; /* 水平半径 / 垂直半径 */
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
#up-triangle {
margin: 50px;
width: 0;
height: 0;
border-bottom: 120px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
#down-triangle {
margin: 50px;
width: 0;
height: 0;
border-top: 80px solid pink;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
#left-triangle {
margin: 50px;
width: 0;
height: 0;
border-right: 100px solid orange;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
#right-triangle {
margin: 50px;
width: 0;
height: 0;
border-left: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
#trapezium {
margin: 50px;
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
#diamond {
margin: 50px;
width: 80px;
height: 80px;
background: purple;
margin: 3px 0 0 30px;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#rectangle {
margin: 50px;
width: 140px;
height: 80px;
background: green;
}
#parallelogram {
margin: 50px;
width: 130px;
height: 75px;
background: pink;
/* Skew */
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}
#twelve-point-star {
margin: 50px;
height: 100px;
width: 100px;
background: orange;
position: relative;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background: orange;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#twelve-point-star:after {
height: 100px;
width: 100px;
background: orange;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
#six-point-star {
margin: 50px;
position: relative;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid red;
}
#six-point-star:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid red;
margin: 30px 0 0 -50px;
} #octagon {
margin: 50px;
width: 100px;
height: 100px;
background: blue;
}
#octagon:before {
height: 0;
width: 40px;
content:"";
position: absolute;
border-bottom: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
}
#octagon:after {
height: 0;
width: 40px;
content:"";
position: absolute;
border-top: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
margin: 70px 0 0 0;
}
#speech-bubble {
margin: 50px;
width: 120px;
height: 80px;
background: purple;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid purple;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}
#egg {
margin: 50px;
display:block;
width:126px;
/* width has to be 70% of height */
/* could use width:70%; in a square container */
height:180px;
background-color:green; /* beware that Safari needs actual
px for border radius (bug) */
-webkit-border-radius:63px 63px 63px 63px/
108px 108px 72px 72px;
/* fails in Safari, but overwrites in Chrome */
border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}
#eq-triangle {
margin: 50px;
width: 0;
height: 0;
border-bottom: 104px solid navy;
/* 104 = 120 * 0.866 */
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
.pacman {
margin: 50px;
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid yellow;
border-left: 60px solid yellow;
border-bottom: 60px solid yellow;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
.biohazard {
margin: 50px;
width: 0;
height: 0;
border-bottom: 60px solid black;
border-top: 60px solid black;
border-left: 60px solid yellow;
border-right: 60px solid yellow;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
#heart {
margin: 50px;
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>
<div id="circle"></div>
<div id="square"></div>
<div id="oval"></div>
<div id="up-triangle"></div>
<div id="down-triangle"></div>
<div id="left-triangle"></div>
<div id="right-triangle"></div>
<div id="trapezium"></div>
<div id="diamond"></div>
<div id="rectangle"></div>
<div id="parallelogram"></div>
<div id="twelve-point-star"></div>
<div id="six-point-star"></div>
<div id="octagon"></div>
<div id="speech-bubble"></div>
<div id="egg"></div>
<div id="eq-triangle"></div>
<div id="pacman"></div>
<div id="biohazard"></div>
<div id="heart"></div>
</body>
</html>
☀【CSS3】形状的更多相关文章
- CSS3基础(4)——CSS3 渲染属性
一. CSS3 计数器详解 CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...
- 20个实用便捷的CSS3工具、库及实例
编者按:坊间传闻,有本CSS的高手炼成秘籍在江湖失传已久,书中所载,多为最新的惊人技术与实例示范,是为集大成者,一旦学成,代码效率猛增,功力提升数倍,今日偶获,不敢怠慢,赶紧发到优设,望人人受益.说人 ...
- 第165天：canvas绘制圆环旋转动画
canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...
- CSS3---渲染属性
1.计数器 CSS3计数器( CSS Counters )可以允许我们使用css对页面中的任意元素进行计数,实现类似于有序列表的功能.与有序列表相比,它的突出特性在于可以对任意元素计数,同时实现个性化 ...
- CSS3制作各种形状图像（转）
CSS3制作各种形状图像 浏览:1417 | 更新:2015-05-24 14:43 | 标签:css 1 2 3 4 5 6 7 分步阅读 圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形- ...
- 使用CSS3制作各种形状
CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用.以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了.通过使用新的CSS属 ...
- Css3新特性应用之形状
一.自适应椭圆 * border-radius特性: * 可以单独指定水平和垂直半径,并且值可以是百分比,用/(斜杠)分隔这两个值即可(可以实现自适应宽度椭圆). * 还可以单独指定四个角 ...
- CSS3制作各种形状图像
圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框 不废话直接 html界面(亲测的) ------转自百 ...
- CSS3 实现圆形、椭圆形、三角形等各种形状样式
CSS3 圆形 #css3-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;} C ...
- CSS3 Shape ---使用形状改变旁边内容的布局
注意 本文所实现的功能,在浏览器的支持上并不好,除chrome浏览器外其余的大部分浏览器均不支持,虽然可以使用polyfill解决,但也不能很好的支持,有时也会出错 polyfill使用方法 下载po ...
随机推荐
- hosts文件配置作用
hosts文件默认路径: C:\Windows\System32\drivers\etc hosts文件认识 Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域 ...
- Less 官方文档学习笔记
LESS 是css的一种扩展,它的编辑器是基于node.js 的less.js,将less文件编译成css文件(可压缩). 其中的概念: 变量:定义变量来代替某个值,只能编译一次,本质是“常量”.例如 ...
- Android中为窗口定义主题
在res/values/styles文件夹中定义如下: <style name="myTheme"> <item name="android:windo ...
- spring setter方法注入
<bean id="dao" class="Dao"></bean> <bean id="service" c ...
- Json 数组排序
/*********************************************Json 数组排序 ******************************************** ...
- linux环境下安装php扩展
本文只提供源码安装的方法(已安装pcntl为例) 其他方法请参考:http://doc3.workerman.net/appendices/install-extension.html 1.利用php ...
- 设置Android程序的默认安装位置
修改 AndroidManifest.xml 文件: <manifest xmlns:android="http://schemas.android.com/apk/res/andro ...
- Android App资源的查找过程分析
Android资源管理框架实际就是由AssetManager和Resources两个类来实现的.其中,Resources类可以根据ID来查找资源,而AssetManager类根据文件名来查找资源.事实 ...
- 005 Python的数值类型
005 Python的数值类型 BIF 指的是内置函数,一般不作为变量命名.如 input,while,if,else,float,等等.整型:整数.(python3.0版本把整型和长整型结合在 ...
- 在虚拟机的linux中利用VMware Tools实现与windows共享文件
很多人都知道安装"VMware Tools"可以实现与windows共享,但是其实它的功能远不止此.安装了"VMware Tools"后,虚拟机的网络. ...