史上最强大的40多个纯CSS绘制的图形[转]
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。
Square(正方形)
#square {
width: 100px;
height: 100px;
background: red;
}
Rectangle(矩形)
#rectangle {
width: 200px;
height: 100px;
background: red;
}
Circle(圆形)
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */
Oval(椭圆形)
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */
Triangle Up(向上的三角形)
#triangle-up {
width: ;
height: ;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
Triangle Down(向下)
#triangle-down {
width: ;
height: ;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
Triangle Left(向左)
#triangle-left {
width: ;
height: ;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
Triangle Right(向右)
#triangle-right {
width: ;
height: ;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
Triangle Top Left(左上)
#triangle-topleft {
width: ;
height: ;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
Triangle Top Right(右上)
#triangle-topright {
width: ;
height: ;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
Triangle Bottom Left(左下)
#triangle-bottomleft {
width: ;
height: ;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
Triangle Bottom Right(右下)
#triangle-bottomright {
width: ;
height: ;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
Curved Tail Arrow(弯尾箭头)
#curvedarrow {
position: relative;
width: ;
height: ;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: solid transparent;
border-top: 3px solid red;
border-radius: 20px ;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
Trapezoid(梯形)
#curvedarrow {
position: relative;
width: ;
height: ;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: solid transparent;
border-top: 3px solid red;
border-radius: 20px ;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
Parallelogram(平行四边形)
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}
Star (6-points)(六角星)
#star-six {
width: ;
height: ;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: ;
height: ;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
Star (5-points)(五角星)
#star-five {
margin: 50px ;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: ;
width: ;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
Pentagon(五边形)
#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px ;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: ;
width: ;
top: -85px;
left: -18px;
border-width: 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
Hexagon(六边形)
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: ;
width: ;
height: ;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: ;
width: ;
height: ;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
Octagon(八边形)
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: ;
left: ;
border-bottom: 29px solid red;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
height: ;
}
#octagon:after {
content: "";
position: absolute;
bottom: ;
left: ;
border-top: 29px solid red;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
height: ;
}
Heart(心形)
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: ;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px ;
border-radius: 50px 50px ;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: %;
-moz-transform-origin: %;
-ms-transform-origin: %;
-o-transform-origin: %;
transform-origin: %;
}
#heart:after {
left: ;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: % %;
-moz-transform-origin: % %;
-ms-transform-origin: % %;
-o-transform-origin: % %;
transform-origin :% %;
}
Infinity(无限符图形)
#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: ;
left: ;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 50px;
border-radius: 50px 50px 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: ;
-moz-border-radius: 50px 50px 50px ;
border-radius: 50px 50px 50px ;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Diamond Square(菱形)
#diamond {
width: ;
height: ;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: ;
height: ;
border: 50px solid transparent;
border-top-color: red;
}
Diamond Shield（钻石盾牌）
#diamond-shield {
width: ;
height: ;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
#diamond-shield:after {
content: '';
position: absolute;
left: -50px; top: 20px;
width: ;
height: ;
border: 50px solid transparent;
border-top: 70px solid red;
}
Diamond Narrow
#diamond-narrow {
width: ;
height: ;
border: 50px solid transparent;
border-bottom: 70px solid red;
position: relative;
top: -50px;
}
#diamond-narrow:after {
content: '';
position: absolute;
left: -50px; top: 70px;
width: ;
height: ;
border: 50px solid transparent;
border-top: 70px solid red;
}
Cut Diamond(砖石形)
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 25px 25px 25px;
height: ;
width: 50px;
position: relative;
margin: 20px 50px ;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: ;
height: ;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 50px;
}
Egg(鸡蛋)
#egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: % % % % / % % % %;
}
Pac-Man(吃豆人)
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
Talk Bubble（聊天框）
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: %;
top: 26px;
width: ;
height: ;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
12 Point Burst（爆炸形状）
#burst- {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-:before, #burst-:after {
content: "";
position: absolute;
top: ;
left: ;
height: 80px;
width: 80px;
background: red;
}
#burst-:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
Yin Yang(阴阳八卦)
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: %;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: %;
left: ;
background: #eee;
border: 18px solid red;
border-radius: %;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: %;
left: %;
background: red;
border: 18px solid #eee;
border-radius:%;
width: 12px;
height: 12px;
}
Badge Ribbon(徽章丝带)
#badge-ribbon {
position: relative;
background: red;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
content: '';
position: absolute;
border-bottom: 70px solid red;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px;
left: -10px;
-webkit-transform: rotate(-140deg);
-moz-transform: rotate(-140deg);
-ms-transform: rotate(-140deg);
-o-transform: rotate(-140deg);
}
#badge-ribbon:after {
left: auto;
right: -10px;
-webkit-transform: rotate(140deg);
-moz-transform: rotate(140deg);
-ms-transform: rotate(140deg);
-o-transform: rotate(140deg);
}
Space Invader（太空入侵者）
#space-invader{
box-shadow:
1em red,
1em 1em red,
-.5em .5em .5em red,
.5em .5em .5em red,
-3em -3em red,
3em -3em red,
-2em -2em red,
2em -2em red,
-3em -1em red,
-2em -1em red,
2em -1em red,
3em -1em red,
-4em red,
-3em red,
3em red,
4em red,
-5em 1em red,
-4em 1em red,
4em 1em red,
5em 1em red,
-5em 2em red,
5em 2em red,
-5em 3em red,
-3em 3em red,
3em 3em red,
5em 3em red,
-2em 4em red,
-1em 4em red,
1em 4em red,
2em 4em red;
background: red;
width: 1em;
height: 1em;
overflow: hidden;
margin: 50px 70px 65px;
}
TV Screen（电视屏幕）
#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px ;
background: red;
border-radius: % / %;
color: white;
text-align: center;
text-indent: .1em;
}
#tv:before {
content: '';
position: absolute;
top: %;
bottom: %;
right: -%;
left: -%;
background: inherit;
border-radius: % / %;
}
Chevron（雪佛龙）
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
}
#chevron:before {
content: '';
position: absolute;
top: ;
left: ;
height: %;
width: %;
background: red;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: ;
right: ;
height: %;
width: %;
background: red;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
Magnifying Glass（放大镜）
#magnifying-glass{
font-size: 10em; /* This controls the size. */
display: inline-block;
width: .4em;
height: .4em;
border: .1em solid red;
position: relative;
border-radius: .35em;
}
#magnifying-glass::before{
content: "";
display: inline-block;
position: absolute;
right: -.25em;
bottom: -.1em;
border-width: ;
background: red;
width: .35em;
height: .08em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
Facebook Icon（Facebook图标）
#facebook-icon {
background: red;
text-indent: -999em;
width: 100px;
height: 110px;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 15px solid red;
border-bottom: ;
}
#facebook-icon::before {
content: "/20";
position: absolute;
background: red;
width: 40px;
height: 90px;
bottom: -30px;
right: -37px;
border: 20px solid #eee;
border-radius: 25px;
}
#facebook-icon::after {
content: "/20";
position: absolute;
width: 55px;
top: 50px;
height: 20px;
background: #eee;
right: 5px;
}
Cone(圆锥形)
#cone {
width: ;
height: ;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 100px solid red;
-moz-border-radius: %;
-webkit-border-radius: %;
border-radius: %;
}
Moon(月亮)
#moon {
width: 80px;
height: 80px;
border-radius: %;
box-shadow: 15px 15px red;
}
Cross（十字架）
#cross {
background: red;
height: 100px;
position: relative;
width: 20px;
}
#cross:after {
background: red;
content: "";
height: 20px;
left: -40px;
position: absolute;
top: 40px;
width: 100px;
}
以上就是纯CSS绘制的各种图形，感受到CSS的强大了吧。
本文链接：http://www.codeceo.com/article/40-css-shapes.html
本文作者：码农网 – 陈少华
[ 原创作品，转载必须在正文中标注并保留原文链接和作者等信息。]
史上最强大的40多个纯CSS绘制的图形[转]的更多相关文章
- 摘记 史上最强大的40多个纯CSS绘制的图形（一）
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- 史上最强大的40多个纯CSS绘制的图形
Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...
- 40多个纯CSS绘制的图形
本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 纯CSS绘制的图形一览
整理网上一些使用纯CSS绘制的图形示例~~纯属抄袭,哈哈...仅仅是为了自己以后查看! Square(正方形) #square { width: 100px; height: 100px; backg ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 强烈推荐：Android史上最强大的自定义任务软件Tasker
强烈推荐:Android史上最强大的自定义任务软件Taskerhttp://bbs.mumayi.com/thread-28387-1-1.html(出处: 木蚂蚁手机乐园) Android上的Tas ...
- 碉堡了！ 纯 CSS 绘制《辛普森一家》人物头像
这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...
随机推荐
- mysql查杀会话
root登陆mysql,查看会话(show processlist\G;): mysql> kill
- jquery收集表单数组及去掉字符串最后的逗号！
jquery收集表单数组: <input type='text' name='one[]' value='' /><br> <input type='text' name ...
- etc/fstab
etc/fstab 就是在开机引导的时候自动挂载到linux的文件系统 设备名称 挂载点 分区的类型 挂载选项 dump选项 fsck选项UUID=ce25cdc7-434f-420b-b3 / ex ...
- Linq初探
1.什么是LINQ LINQ是语言集成查询(Language Integrated Query),这项技术是在.net 3.5就已经引入的技术,极大的方便了数据的查询,他可以支持数据库.XML.ADO ...
- vs 2015
基于应用要求和要使用的语言选择所需工具. Xamarin for Visual Studio:针对所有设备的 C# 中的常用基本代码 Apache Cordova with Visual Studio ...
- 您好，前端使用https，后端使用https是会有冲突的情况，所以默认后端都是http 负载均衡即可管理证书，不需要在后端ECS上绑定证书。
您前端使用https,那么前端就是加密的,后端使用https就是会访问出现问题的,目前阿里云负载均衡默认的配置前端使用https,后端默认就是http,也是无法更改的. 前端使用https,目前只有一 ...
- 符合语言习惯的 Python 优雅编程技巧
Python最大的优点之一就是语法简洁,好的代码就像伪代码一样,干净.整洁.一目了然.要写出 Pythonic(优雅的.地道的.整洁的)代码,需要多看多学大牛们写的代码,github 上有很多非常优秀 ...
- 使用Rxjava自己创建RxBus
https://piercezaifman.com/how-to-make-an-event-bus-with-rxjava-and-rxandroid/ https://lingyunzhu.git ...
- 【开发者笔记】MQTT python测试笔记
MQTT是基于订阅/发布的物联网协议. python测试需要一个发送进程和接收进程,即一个发送客户端和一个接收客户端,如果这两个客户端工作在同一个topic下,那么就能进行消息互通了. 服务器用“io ...
- 博客迁移至新平台ixirong.com
很久没有在博客园上写文章了,一是时间有些忙,更重要的是自己还是没有抽出时间来坚持写下去,由于15年后自己的一些打算,在前一段时间的时候,建立了自己的个人博客站点,http://www.ixirong. ...