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

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

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

【 tulaoshi.com - 平面设计】

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

1.正方形

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

#square {

（本文来源于图老师网站，更多请访问http://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教程,图老师教程网

#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教程,图老师教程网

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/pmsj/）
#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;}

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

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

用CSS代码写出的各种形状图形 02-17
写出更好的代码CSS代码书写技巧分享 02-19
帮我写出更好的CSS代码的一些技巧 02-19
用HTML和CSS写出漂亮正规的BLOG 02-19
用WPS标注各种图形符号 03-31
Css改变鼠标形状的15种效果代码 02-19
教你用html和css写出漂亮正规的Blog 01-29
XHTML+CSS写出正规的BLOG 02-19
XHTML+CSS写出正规BLOG 02-19
Flash as入门(16)：用AS绘制各种图形-Flash actionscript 03-18

用CSS实现文字垂直居中的代码

标签： Web开发

用CSS实现文字垂直居中的代码 style type="text/css" !-- .con_div{ width:400px; height:300px; border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle; background:red; color:#fff } /*FOR IE*/ .webjx{ width:0; height:100%; display:inline-block; vertical-align:middle; } -- /style div class="...

用CSS3做的各种网页效果

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

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

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

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

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

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

标签： Web开发

在Word2024的SmartArt图形中添加形状

标签： word

在Word2010的SmartArt图形中添加形状默认情况下，Word2010中的每种SmartArt图形布局均有固定数量的形状。用户可以根据实际工作需要删除或添加形状，操作步骤如下所述：第1步，打开Word2010文档窗口，在SmartArt图形中单击选中与新形状相邻或具有层次关系的已有形状。第2步，在SmartArt工具/设计功能区的创建图形分组中...

查看更多精彩>>