☀【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 ...
随机推荐
- php注册登录时生成的验证码
http://blog.sina.com.cn/s/blog_8173443e01012l82.html 记得我学php时第一件事就是研究登陆注册.当然,登陆少不了验证码.两年过去了,昨天突然想用个验 ...
- 1_使用Java文件的并发写
为了实现,并发写操作,首先实验一下在本地情况下, 将一个文件切分成若干个 文件块 然后将文件块 通过多线程的并发的方式写入到指定目录下的文件中. 下面是简单的试着实现代码,暂时 先进行记录一下: im ...
- dumpbin工具的使用
当我们需要查看一个dll或exe文件中的包含的函数或是依赖的函数之类的信息,可以使用Visual Studio自带的工具dumpbin来实现,使用方法为: 1/ 启动Visual Studio 命令行 ...
- Java根据出生年月日获取到当前日期的年月日
源码链接:http://pan.baidu.com/s/1sj61IUD
- 一、Maven环境搭建（windows 环境）
所需工具 : JDK 1.7 java 环境 Maven 3.3.9 下载最新版本 Windows 7 注 Maven 3.2 要求 JDK 1.6 或以上版本, 而 Maven 3.0/3. ...
- EqualsBuilder和HashCodeBuilder(重写equal和hashcode)
EqualsBuilder和HashCodeBuilder 自动化hashCode()和equals() 问题产生:当需要自动实现hashCode()和equals()方法 解决方法:使用Equa ...
- UVA 11462 Age Sort（计数排序法 优化输入输出）
Age Sort You are given the ages (in years) of all people of a country with at least 1 year of age. Y ...
- (poj) 1751 Highways
Description The island nation of Flatopia is perfectly flat. Unfortunately, Flatopia has a very poor ...
- Range Minimum Query and Lowest Common Ancestor
作者:danielp 出处:http://community.topcoder.com/tc?module=Static&d1=tutorials&d2=lowestCommonAnc ...
- web api 跨域请求，ajax跨域调用webapi
1.跨域问题仅仅发生在Javascript发起AJAX调用,或者Silverlight发起服务调用时,其根本原因是因为浏览器对于这两种请求,所给予的权限是较低的,通常只允许调用本域中的资源,除非目标服 ...