☀【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 ...
随机推荐
- lucene 4.4 demo
ackage com.zxf.demo; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStr ...
- jenkins（二）项目构建
通过上一篇“jenkins(一)集成环境搭建示例”,已经完成了jenkins的安装,基本配置,启动,下面继续小结jenkins使用 一.jenkins系统配置 访问jenkins,点击系统管理-> ...
- OC加强-day03
#program mark - 0_18 分类的使用注意 [掌握] 1.分类的作用 作用:讲一个类分为多个模块,将相似功能的方法写在同一个模块中,方便我们后面代码的维护 "强调 1.分类中只 ...
- UiTextField对输入的长度进行限制并提示用户还可输入的长度
最近想做用户昵称的限制,但是网上百度了很多方法效果都不是我自己想要的,终于找到种方法 如下: 1.声明两个属性 nickname是昵称的textfleld canEditSizeLAbel是提示用户剩 ...
- Visual Studio2013使用Microsoft Office Document Imaging（MODI）的方法
若要安装和 Microsoft Office 2013 一同使用的 Microsoft Office Document Imaging (MODI),请选择以下方法之一: 方法 1:通过安装 Shar ...
- Cogs 1844. [JSOI2008]最大数maxnumber
[JSOI2008]最大数maxnumber ★★ 输入文件:bzoj_1012.in 输出文件:bzoj_1012.out 简单对比 时间限制:3 s 内存限制:162 MB [题目描述] 现在请求 ...
- bzoj1007：[HNOI2008]水平可见直线
思路:首先按斜率排序,如果斜率相同就取截距最大的,显然截距小的会被覆盖而对答案没有贡献,然后考虑斜率不同的如何统计答案,可以用一个单调栈维护,当前新插入的直线显然斜率是要比当前栈顶斜率要大的,然后如果 ...
- 用ContentProvider向系统增加联系人
发现对系统的联系人进行操作的api很乱,感觉逻辑有点不清楚...... 主要用到这4个类: android.provider.ContactsContract.CommonDataKinds.Emai ...
- Name control
static: (Page 406) In both C and C++ the keyword static has two basic meanings, which unfortunately ...
- 模板：优先队列(priority_queue)
#include <iostream> #include <cstdio> #include <queue> #include <vector> usi ...