用CSS代码写出的各种形状图形

2016-02-17 02:16 3 1 收藏

下面这个用CSS代码写出的各种形状图形教程由图老师小编精心推荐选出，过程简单易学超容易上手，喜欢就要赶紧get起来哦！

【 tulaoshi.com - 平面设计】

一共收集整理了图形20个，比较实用，同时也为了熟悉CSS的代码。整合了一下，有错误欢迎指出。

1.正方形

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#square {

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/pmsj/）width: 100px;height: 100px;background: red;}

2.长方形

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#rectangle {width: 200px;height: 100px;background: red;}

3.左上三角

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#triangle-topleft {width: 0;height: 0;border-top: 100px solid red; border-right: 100px solid transparent;}

4.右上三角

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#triangle-topright {width: 0;height: 0;border-top: 100px solid red; border-left: 100px solid transparent;}

5.左下三角

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#triangle-bottomleft {width: 0;height: 0;border-bottom: 100px solid red; border-right: 100px solid transparent;}
6.右下三角

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#triangle-bottomright {width: 0;height: 0;border-bottom: 100px solid red; border-left: 100px solid transparent;}
7.平行四边形

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#parallelogram {width: 150px;height: 100px;-webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg);background: red;}
8.梯形

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#trapezoid {border-bottom: 100px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;height: 0;width: 100px;}

9.六角星

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#star-six {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;position: relative;}#star-six:after {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;position: absolute;content: "";top: 30px;left: -50px;}

10.五角星

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#star-five { margin: 50px 0; 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: 0; width: 0; 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: '';}

11.五边形

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#pentagon { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent;}#pentagon:before { content: ""; position: absolute; height: 0; width: 0; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent red;}
12.六边形

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#hexagon {width: 100px;height: 55px;background: red;position: relative;}#hexagon:before {content: "";position: absolute;top: -25px; left: 0;width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 25px solid red;}#hexagon:after {content: "";position: absolute;bottom: -25px; left: 0;width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 25px solid red;}

13.桃心

用CSS代码写出的各种形状图形,PS教程,图老师教程网

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/pmsj/）

#heart { position: relative; width: 100px; height: 90px;}#heart:before,#heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; 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%;}
14。无限大符号

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#infinity {   position: relative;   width: 212px;   height: 100px;}
#infinity:before,#infinity:after {   content: "";   position: absolute;   top: 0;   left: 0;   width: 60px;   height: 60px;     border: 20px solid red;   -moz-border-radius: 50px 50px 0 50px;   border-radius: 50px 50px 0 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: 0;   -moz-border-radius: 50px 50px 50px 0;   border-radius: 50px 50px 50px 0;   -webkit-transform: rotate(45deg);   -moz-transform: rotate(45deg);   -ms-transform: rotate(45deg);   -o-transform: rotate(45deg);   transform: rotate(45deg);}
15.蛋

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#egg { display:block; width: 126px; height: 180px; background-color: red; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}

16.提示对话框

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#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: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent;}

17.十二角星

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#burst-8 { background: red; width: 80px; height: 80px; position: relative; text-align: center; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20eg); transform: rotate(20deg);}#burst-8:before { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: red; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}

18.八角星

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#cut-diamond { border-style: solid; border-color: transparent transparent red transparent; border-width: 0 25px 25px 25px; height: 0; width: 50px; position: relative; margin: 20px 0 50px 0;}#cut-diamond:after { content: ""; position: absolute; top: 25px; left: -25px; width: 0; height: 0; border-style: solid; border-color: red transparent transparent transparent; border-width: 70px 50px 0 50px;}

20.八卦

用CSS代码写出的各种形状图形,PS教程,图老师教程网

#yin-yang {width: 96px;height: 48px;background: #eee;border-color: red;border-style: solid;border-width: 2px 2px 50px 2px;border-radius: 100%;position: relative;} #yin-yang:before {content: "";position: absolute;top: 50%;left: 0;background: #eee;border: 18px solid red;border-radius: 100%;width: 12px;height: 12px;} #yin-yang:after {content: "";position: absolute;top: 50%;left: 50%;background: red;border: 18px solid #eee;border-radius:100%;width: 12px;height: 12px;}

来源:https://www.tulaoshi.com/n/20160217/1577562.html

看过《用CSS代码写出的各种形状图形》的人还看了以下文章更多>>

Flash as入门(16)：用AS绘制各种图形-Flash actionscript

标签： FLASH flash教程

本例继续讲解AS的基础知识，今天我们来学习Flash AS入门系列教程第七课：影片剪辑第10节用AS绘图，教程详细讲解了运用AS绘制各种图形的方法，对Flash的AS编程有兴趣的朋友可以到论坛与作者交流。上一篇文章：Flash as入门(15)：filters类滤镜用AS绘图 AS2.0这我们提供了一些绘图方法，利用这些方法，我们可以绘制一些图形。下面来认识一下...

用CSS3做的各种网页效果

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

用纯CSS也可以实现各种各样很酷的效果了，甚至是动画。虽然有些效果不能跨浏览器(甚至是支持CSS3的浏览器)运行，有些只是展示并没什么实际用途，但仅用CSS实现出的这些效果似乎没什么可以挑剔的。对于设计人员和开发人员来说，CSS一直是web设计过程中重要的一部分，随着CSS3的出现以及越来越多的浏览器对它的支持，设计师们有了更多的选择...

CSS3教程：由CSS3代码生成的图形与图标设计

标签： Web开发

本文中的这些标志与图标都是用CSS3制作而成，看上去似乎很不可思议，其中包括了IE图标，网站图标，奥运会标志等等，都是一些十分常见的标志，而它们之所有如此特别是因为这些标志与图标只是用CSS3来显示在网页中，而并非图片显示。尽管被批评为走火入魔，CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计，如果你看到本文介绍的...

由CSS3代码生成的图形与图标设计

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

用DIV+CSS设计出圆角矩形的代码

标签： Web开发

很多人到处寻求个使用DIV+CSS制作出圆角矩形的方法，使用底下的一段代码你就可以轻松实现这个很拽的圆角矩形了。＜style＞div.bg{background:#ffc20e;width:50%}b{display:block;} /*将所有B标签转成块级元素*/ div b.topb b,div b.bottomb b {height:1px;overflow:hidden;background:#ffc20e;} /*div标签内类名为topb/bottomb的那个b标...

查看更多精彩>>