☀【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 ...
随机推荐
- Oracle中用一张表的字段更新另一张表的字段
今天在做项目的过程中,发现开发库中某张表的某字段有许多值是空的,而测试库中该字段的值则是有的. 那么,有什么办法能将测试库中该字段的值更新到开发库中呢? SQL Server中这是比较容易解决的,而O ...
- 解决IE浏览器IFrame对象内存不释放问题
最近项目组发现在使用showModalDialog弹出窗体中如果包含IFrame对象,则IFrame对象占用的内存资源在窗体关闭后不会释放.弹出关闭反复多次后,IE浏览器内存占用可超过数百M,严重时I ...
- JSP EL表达式详细介绍
一.JSP EL语言定义 E L(Expression Language) 目的:为了使JSP写起来更加简单. 表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提供了在 ...
- form 表单 action 参数 接收不了
<form method="get" action="/test/index.php?mod=123456" > <input type=&q ...
- UVA 11464 Even Parity（部分枚举 递推）
Even Parity We have a grid of size N x N. Each cell of the grid initially contains a zero(0) or a on ...
- Hack--兼容性测试
CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效 ...
- mysql数据库导出时报错mysqldump: Got error: 145的解决方法
在给mysql数据库备份时,报错:mysqldump: Got error: 145: Table './jxzhtopenfire/ofoffline' is marked as crashed ...
- 【Android】 Sqlite3 not found
调试机没有sqlite3命令文件 导入即可 sqlite3 http://pan.baidu.com/s/1bohTMiz //(使用老版sqlite3需要导入libncurses.so文件至/sys ...
- JavaScript学习总结【12】、JS AJAX应用
1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技 ...
- WCF Rest Json
1.定义ServiceContract及实现 [ServiceContract] public interface IMemberService { [OperationContract] strin ...