前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单，方便大家急用时有地方可查。别的不多说了，直接看代码。

为了节省时间，下面图形都采用的一个标签，可以是块元素也可以是行内元素，不过行内元素需要加上“display:block;”，唯一不同的是，在此用了不同的类名来区别，相关类名我放在了标题的后面，以便大家对应查看。

1、正方形(square)：

CSS Code:

.square {

width: 100px;

height:100px;

background: #E5C3B2;

}

上面的方法是，设置宽度和高度一致就可以实现正方形的效果，下面展示一种boder制作正方形的效果：

.square {

width:0;

height:0;

border: 50px solid #E5C3B2;/*边框大小等于正方形宽度(或高度)的一半*/

}

效果：

2、平行四边形(parallelogram)

CSS Code:

.parallelogram {

width: 100px;

height: 70px;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

-ms-transform: skew(20deg);

transform: skew(20deg);

background: #E5C3B2;

}

效果：

我们可以通过“skew”的值大小来控制角度，如果其值为负值，将会改变扭曲方向：

.parallelogram2 {

width: 100px;

height: 70px;

-webkit-transform: skew(-20deg);

-moz-transform: skew(-20deg);

-o-transform: skew(-20deg);

-ms-transform: skew(-20deg);

transform: skew(-20deg);

background: #E5C3B2;

}

效果：

3、菱形(diamond)

CSS Code:

.diamond {

width: 80px;

height: 80px;

margin: 40px 0 0 40px;

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

transform-origin: 0 100%;

-webkit-transform:rotate(-45deg);

-moz-transform:rotate(-45deg);

-o-transform:rotate(-45deg);

-ms-transform:rotate(-45deg);

transform:rotate(-45deg);

background: #E5C3B2;

}

效果：

4、长方形()

CSS Code:

.rectangle {

width: 100px;

height: 50px;

background: #E5C3B2;

}

效果：

5、梯形(trapezoid)

梯形一

CSS Code:

.trapezoid-1 {

height: 0;

width: 100px;

border-bottom: 100px solid #e5c3b2;

border-left: 60px solid transparent;

border-right: 60px solid transparent;

}

效果：

梯形二

CSS Code:

.trapezoid-2 {

height: 0;

width: 100px;

border-top: 100px solid #e5c3b2;

border-left: 60px solid transparent;

border-right: 60px solid transparent;

}

效果：

梯形三

CSS Code:

.trapezoid-3 {

height: 100px;

width: 0;

border-right: 100px solid #e5c3b2;

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

}

效果：

梯形四

CSS Code:

.trapezoid-4 {

height: 100px;

width: 0;

border-left: 100px solid #e5c3b2;

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

}

效果：

6、三角形(triangle)

三角形朝上

CSS Code:

.triangle-up {

height: 0;

width: 0;

border: 50px solid #e5c3b2;

border-color: transparent transparent #e5c3b2 transparent;

}

效果：

三角朝右

CSS Code:

.triangle-rihgt {

height: 0;

width: 0;

border: 50px solid #e5c3b2;

border-color: transparent transparent transparent #e5c3b2;

}

效果：

三角朝下

CSS Code:

.triangle-down {

height: 0;

width: 0;

border: 50px solid #e5c3b2;

border-color: #e5c3b2 transparent transparent transparent;

}

效果：

三角朝左

CSS Code:

.triangle-left {

height: 0;

width: 0;

border: 50px solid #e5c3b2;

border-color: transparent #e5c3b2 transparent transparent;

}

效果：

7、半圆(semicircle)

上半圆

CSS Code:

.semicircle-top {

background: #e5c3b2;

height: 25px;

width: 50px;

-moz-border-radius: 50px 50px 0 0;

-webkit-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

}

效果：

右半圆

CSS Code:

.semicircle-right {

background: #e5c3b2;

height: 50px;

width: 25px;

-moz-border-radius: 0 0px 50px 0;

-webkit-border-radius:0 50px 50px 0;

border-radius:0 50px 50px 0;

}

效果：

下半圆

CSS Code:

.semicircle-down {

background: #e5c3b2;

height: 25px;

width: 50px;

-moz-border-radius:0 0 50px 50px;

-webkit-border-radius:0 0 50px 50px;

border-radius:0 0 50px 50px;

}

效果：

左半圆

CSS Code:

.semicircle-left {

background: #e5c3b2;

height: 50px;

width: 25px;

-moz-border-radius:50px 0 0 50px;

-webkit-border-radius:50px 0 0 50px;

border-radius:50px 0 0 50px;

}

效果：

8、圆(circle)

CSS Code:

.circle {

background: #e5c3b2;

height: 50px;

width: 50px;

-moz-border-radius: 25px;

-webkit-border-radius:25px;

border-radius: 25px;

}

效果：

9、椭圆(oval)

水平椭圆

CSS Code:

.ovalHor {

background: #e5c3b2;

height: 40px;

width: 80px;

-moz-border-radius: 40px/20px;

-webkit-border-radius:40px/20px;

border-radius: 40px/20px;

}

效果：

垂直椭圆

CSS Code:

.ovalVert {

background: #e5c3b2;

height: 80px;

width: 40px;

-moz-border-radius: 20px/40px;

-webkit-border-radius:20px/40px;

border-radius: 20px/40px;

}

效果：

10、表图(chartColorful)

CSS Code:

.chartColorful {

height: 0px;

width: 0px;

border: 50px solid red;

border-color: purple red yellow orange;

-moz-border-radius: 50px;

-webkit-border-radius:50px;

border-radius: 50px;

}

效果：

11、四分之一圆(quarterCircle)

四分之一圆(上)

CSS Code:

.quarterCircleTop {

background: #e5c3b2;

height: 50px;

width: 50px;

-moz-border-radius: 50px 0 0 0;

-webkit-border-radius: 50px 0 0 0;

border-radius: 50px 0 0 0;

}

效果：

四分之一圆(右)

CSS Code:

.quarterCircleRight {

background: #e5c3b2;

height: 50px;

width: 50px;

-moz-border-radius: 0 50px 0 0;

-webkit-border-radius: 0 50px 0 0;

border-radius:0 50px 0 0;

}

效果：

四分之一圆(下)

CSS Code:

.quarterCircleBottom {

background: #e5c3b2;

height: 50px;

width: 50px;

-moz-border-radius: 0 0 50px 0;

-webkit-border-radius: 0 0 50px 0;

border-radius:0 0 50px 0;

}

效果：

四分之一圆(左)

CSS Code:

.quarterCircleLeft {

background: #e5c3b2;

height: 50px;

width: 50px;

-moz-border-radius: 0 0 0 50px;

-webkit-border-radius: 0 0 0 50px;

border-radius:0 0 0 50px;

}

效果：

12、Chart(quarterCircle)

Chart(上)

CSS Code:

.chartTop {

height: 0px;

width: 0px;

border:50px solid #e5c3b2;

border-top-color: transparent;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

效果：

Chart(右)

CSS Code:

.chartRight{

height: 0px;

width: 0px;

border:50px solid #e5c3b2;

border-right-color: transparent;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

效果：

Chart(下)

CSS Code:

.chartBottom {

height: 0px;

width: 0px;

border:50px solid #e5c3b2;

border-bottom-color: transparent;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

效果：

Chart(左)

CSS Code:

.chartLeft {

height: 0px;

width: 0px;

border:50px solid #e5c3b2;

border-left-color: transparent;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

效果：

13、心形(heart)

左心形

CSS Code

.heartLeft{

width: 0;

height: 0;

border-color: red;

border-style: dotted;

border-width: 0 40px 40px 0;

}

效果：

右心形

CSS Code

.heartRight{

width: 0;

height: 0;

border-color: red;

border-style: dotted;

border-width: 0 0 40px 40px;

}

效果：

14、彩带(ribbon)

CSS Code

.ribbon {

width: 0;

height: 100px;

border-left: 50px solid red;

border-right: 50px solid red;

border-bottom: 35px solid transparent

}

效果：

上面就用CSS制作的32种图形效果，当然大家还可以发挥你的想像和创造，制作一些更精美的图形。

扩展阅读：

那么今天就说到这里了，如果大家有更多的效果制作方法，请在下面的评论中分享。

如需转载烦清注明出处：W3CPLUS

html中多边形图形怎么制作,CSS制作图形速查表相关推荐

  1. CSS常用属性速查表

    属性太多,对于我这种不深入WEB的人员,还是有个速查表方便多了,注意利用开头的目录,会不断更新的 CSS 字体属性(Font) 属性 描述 CSS  font 在一个声明中设置所有字体属性. 1  f ...

  2. 20110126 学习记录：一些关于html中布局的代码 CSS hack速查表

    让你的浏览器body滚动条在左边  direction: rtl; HTML段落两端对齐代码 text-align:justify; text-justify:inter-ideograph; 图片垂 ...

  3. html label标签 ie6,IE6 IE7 IE8三大浏览器的CSS兼容速查表

    IE每个新版本的推出,就不可避免地在IE的各个主要版本之间产生兼容问题,尽管IE8推出已有时日,使用IE6的用户仍然相当可观.本文以速查手册的形式介绍CSS(2.1和3)在IE6,IE7,IE8三个版 ...

  4. markdown中快速插入Emoji表情包语法速查表！！！

    markdown中快速插入Emoji表情包语法速查表!!!

  5. Web设计中的中国传统色彩速查表

    转自:http://css9.net/chinese-traditional-color-in-web-desig/  觉得很全,分享一下,以下为作者iiduce所言"诗词中有:" ...

  6. DL4J中文文档/开始/速查表

    快速检索 DL4J(和相关项目)有很多功能.此篇的目标是总结这个功能,以便用户知道存在什么功能,以及在哪里可以找到更多信息. 内容 层 前馈层 输出层 卷积层 循环层 无监督层 其它层 图顶点 输入预 ...

  7. CSS Hack 汇总速查一览

    由于浏览器之间存在兼容性问题,在制作网页的时候,为了使页面能在不同浏览器中显示相对一致或者其他原因,网页制作人员总结了种种 Hack 方法:在解 决兼容性问题之前,这些方法还经常会用到.接下来,大前端 ...

  8. css flexbox模型_Flexbox-Ultimate CSS Flex速查表（带有动画图！）

    css flexbox模型 This comprehensive CSS flexbox cheatsheet will cover everything you need to know to st ...

  9. HTML/HTML5/CSS/CSS3教程速查手册地址以及如何快速直到webkit的用法

    http://www.w3school.com.cn/ http://www.runoob.com/ 不过上面这两个都是标准的CSS和CSS3教程,针对一些类似-webkit-内核的样式没有公布. 下 ...

最新文章

  1. 相比Redis，Memcached真的过时了吗？
  2. HDU2767（强连通分量+Kosaraju算法）
  3. 一起再看执行上下文／作用域链／原型链
  4. 主流WAF架构分析与探索
  5. 博图只能通过地址相同设备找到plc_小白求教:博途v13无法连接s7-1200，显示在网络上未找到任何设备...
  6. IOTA 交易，确认和共识
  7. 如何保证消息不被重复消费~~~~~(如何保证消息队列的幂等性)
  8. python安装方法_【Python教程】Windows10 安装Python
  9. GPT2模型训练，50w个多轮中文对话语料
  10. 集成学习 Bagging, Boosting, Stacking
  11. 杂项-协议-HTTP：GET/POST/PUT/DELETE/INPUT/TRACE/OPTIONS/HEAD方法
  12. 关于联想Y400/Y500刷BIOS解锁网卡、单双650M、单双750M超频
  13. Word批量转PDF 无水印
  14. D511 外置功放软件烧录方法
  15. 空间里相片批量导入u盘_怎样将U盘内相片弄到QQ空间的相册内
  16. at89s51单片机是几位微型计算机,单片机原理章习题
  17. 3.22 进口物料的报关手册核销
  18. Autoit+selenium+python实现文件上传功能
  19. 定时任务的多种实现——xxl-job
  20. maven安装使用手册之-----------------------maven介绍及安装部署

热门文章

  1. vmware迁移问题
  2. 打开AD组策略编辑器提示“strings区段项目太长被截断”的解决
  3. 【LetCode 算法修炼】Add Two Numbers
  4. Java关键字系列(public,protected,private)
  5. 利用samba和mount命令 进行文件共享
  6. php时间戳与日期互转
  7. ASP.NET MVC Framework体验（2）：显示列表数据
  8. python 保留两位小数 实现方法
  9. python 简化连锁比较 pycharm提示Simplify chained comparison
  10. linux 内核参数 max_map_count 进程可拥有的虚拟内存区域数量 简介