本文分享了28种CSS3绘制多边形的代码。在做网页项目中需要使用多边形扇形图形来完成一些功能，第一印象就是使用CSS3来完成。经过查资料发现了transform 的skew()正好合适且且使用方便。

先看一个CSS3绘制多边形扇形的例子：

CSS 画扇形

.sector{

height: 200px;

width: 200px;

overflow:hidden;

transform-origin: 0 100%;

transform: skew(-50deg);

position: relative;

background: #cccccc;

}

.sector:before{

height:inherit;

width: inherit;

position: absolute;

content: "";

border-radius: 0 200px 0 0;

background: #fecb2f;

transform-origin: 0 100%;

transform: skew(50deg);

}

以下是28种CSS3绘制多边形的CSS代码，全部28中代码对应的DIV容器都一样，如下：

div的class记得修改成相应的class名。

1、CSS3绘制正方形

CSS代码如下：

#square {

width: 100px;

height: 100px;

background: red;

}

2、 CSS3绘制长方形

CSS代码如下：#rectangle {

width: 200px;

height: 100px;

background: red;

}

3、 CSS3绘制圆形

CSS代码如下：#circle {

width: 100px;

height: 100px;

background: red;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

4、 CSS3绘制椭圆

CSS代码如下：#oval {

width: 200px;

height: 100px;

background: red;

-moz-border-radius: 100px / 50px;

-webkit-border-radius: 100px / 50px;

border-radius: 100px / 50px;

}

5、 CSS3绘制上三角

CSS代码如下：#triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

6、 CSS3绘制 下三角

CSS代码如下：#triangle-down {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid red;

}

7、 CSS3绘制左三角

CSS代码如下：

#triangle-left {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 100px solid red;

border-bottom: 50px solid transparent;

}

8、 CSS3绘制右三角

CSS代码如下：#triangle-right {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-left: 100px solid red;

border-bottom: 50px solid transparent;

}

9、 CSS3绘制左上三角

CSS代码如下：#triangle-topleft {

width: 0;

height: 0;

border-top: 100px solid red;

border-right: 100px solid transparent;

}

10、 CSS3绘制右上三角

CSS代码如下：

#triangle-topright {

width: 0;

height: 0;

border-top: 100px solid red;

border-left: 100px solid transparent;

}

11、 CSS3绘制左下三角

CSS代码如下：#triangle-bottomleft {

width: 0;

height: 0;

border-bottom: 100px solid red;

border-right: 100px solid transparent;

}

12、 CSS3绘制右下三角

CSS代码如下：

#triangle-bottomright {

width: 0;

height: 0;

border-bottom: 100px solid red;

border-left: 100px solid transparent;

}

13、 CSS3绘制平行四边形

CSS代码如下：

#parallelogram {

width: 150px;

height: 100px;

margin-left:20px;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

background: red;

}

14、 CSS3绘制梯形

CSS代码如下：#trapezoid {

border-bottom: 100px solid red;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

height: 0;

width: 100px;

}

15、CSS3绘制六角星

CSS代码如下：#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;

}

16、 CSS3绘制五角星

CSS代码如下：#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: ”;

}

17、 CSS3绘制五角大楼

CSS代码如下：

#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;

}

18、 CSS3绘制六边形

CSS代码如下：

#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;

}

19、 CSS3绘制八角形

CSS代码如下：

#octagon {

width: 100px;

height: 100px;

background: red;

position: relative;

}

#octagon:before {

content: “”;

position: absolute;

top: 0;

left: 0;

border-bottom: 29px solid red;

border-left: 29px solid #eee;

border-right: 29px solid #eee;

width: 42px;

height: 0;

}

#octagon:after {

content: “”;

position: absolute;

bottom: 0;

left: 0;

border-top: 29px solid red;

border-left: 29px solid #eee;

border-right: 29px solid #eee;

width: 42px;

height: 0;

}

20、 CSS3绘制爱心

CSS代码如下：

#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%;

}

21、 CSS3绘制无穷大符号

CSS代码如下：

#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);

}

22、 CSS3绘制鸡蛋

CSS代码如下：

#egg {

display:block;

width: 126px;

height: 180px;

-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}

23、 CSS3绘制食逗人(Pac-Man)

CSS代码如下：

#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;

}

24、 CSS3绘制提示对话框

CSS代码如下：

#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;

}

25、 CSS3绘制12角星

CSS代码如下：

#burst-12 {

background: red;

width: 80px;

height: 80px;

position: relative;

text-align: center;

}

#burst-12:before, #burst-12:after {

content: “”;

position: absolute;

top: 0;

left: 0;

height: 80px;

width: 80px;

background: red;

}

#burst-12:before {

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

transform: rotate(30deg);

}

#burst-12:after {

-webkit-transform: rotate(60deg);

-moz-transform: rotate(60deg);

-ms-transform: rotate(60deg);

-o-transform: rotate(60deg);

transform: rotate(60deg);

}

26、 CSS3绘制8角星

CSS代码如下：

#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);

}

27、 CSS3绘制钻石

CSS代码如下：

#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;

}

28、 CSS3绘制阴阳八卦(霸气的这个)

代码如下:

#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;

}

好了，就到这里了，一共28个CSS3绘制多边形的代码，个人觉得后面几个比较犀利。

html 根据坐标画多边形,28种css3绘制多边形代码分享相关推荐

  1. python绘制多边形样例_Python绘制多边形

    所以我试着用点类来画不同的多边形.我制作了一个名为generate_polygon的类,它应该生成一个有s边的正多边形,y0是起始顶点.在import sys import math import L ...

  2. python绘制多边形的程序_Python – 绘制多边形

    所以我试图使用点类绘制不同的多边形.我创建了一个名为generate_polygon的类,它应该生成一个带有s边和x0的正多边形,y0是起始顶点. import sys import math imp ...

  3. ▷Scratch课堂丨使用scratch画了一棵圣诞树的实例代码分享

    目录 1:源码下载地址: 2:代码实现步骤: 好了,上图是我们需要实现的效果图: 1:源码下载地址: https://download.csdn.net/download/IT_Scratch/872 ...

  4. QT绘制多边形-----五边形

    *QT绘制多边形 今天学习qt绘制多边形的绘制 1.先创建一个新项目Application->Qt Widgets Application 2.在头文件.h添加: protected: //在保 ...

  5. 实验三 交互式绘制多边形

    visual studio2019实现交互式绘制多边形 这个实验······在网上找不到.孔令德的实验代码下载下来有密码,暴力破解没希望,只能自己写了. 这个和实验二是紧密相连的. 实验实现的目标 在 ...

  6. 百度地图的使用 绘制多边形 编辑多边形

    项目需要手动绘制地图 采用了百度 首先引入地图 给地图一个样式 使他充满全屏  绘制多边形方法 (只绘制多边形  无法绘制圆等图形) 开启绘画工具  添加监听方法  将描绘的点存在form.path里 ...

  7. html可以用坐标画svg图吗,HTML5如何使用SVG的方法示例

    代码优化永远是程序员亘古不变的需求,而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环,既然是优化,那我们先来看看SVG图片都有哪些优势: SVG 可被非常多的工具读取和 ...

  8. html用css画多边形,Sass绘制多边形_Preprocessor, Sass, SCSS, clip-path, CSS处理器, 会员专栏 教程_W3cplus...

    CSS画图形在Web运用中时常看到,比如三角形.五角星,心形,Ribbon等.不过以前使用CSS绘制图形一般都是借助于border来绘制,但这样的方式受到一定的限制,而且实用价值也有所限制.这篇文章将 ...

  9. html鼠标元素效果,十五种css3鼠标hover效果

    css3有哪些不错的hover效果 CSS3在hover下的几种效果代码分享,CSS3在鼠标经过时的几种效果集锦 效果一:360°旋转 修改rotate(旋转度数) 01 * { 02 transit ...

最新文章

  1. python生成pdf报表_用python的reportlab库生成PDF报表
  2. CYQ.Data V5 分布式自动化缓存设计介绍（二）
  3. 激进的中国技术选型，给世界技术的发展带来了什么？
  4. 24分钟学会用JMock进行单元测试
  5. python google buffer_python调用Google Protocol Buffer
  6. flask框架视图和路由_角度视图，路由和NgModule的解释
  7. springMVC使用拦截器针对控制器方法做预处理、后处理、资源清理
  8. 你想让网站排名在百度或GOOGLE的第一位吗
  9. reids学习笔记汇总
  10. mtk android 串口日志重定向,MTK UART串口调试
  11. Java 技巧篇-IntelliJ IDEA快捷键设置，格式化代码快捷键
  12. 初步设计对复杂系统的意义
  13. 利用栈实现中缀表达式转前缀表达式
  14. 【MySQL】查询每一个用户的最新学历情况？分地区统计各自学历情况？
  15. 银盒子受邀出席银联云闪付大会，获“最佳行业合作”奖
  16. 树莓派远程桌面连接-使用Windows自带远程桌面连接工具
  17. IE网页flash空白
  18. 电影《巴格西》：偏执狂才能名扬千古
  19. 第二次作业：微信，是一个生活方式
  20. Innodb独立表空间的配置

热门文章

  1. 基于关键帧的RGB-D视觉惯性里程计
  2. Pytorch 深度学习实战：视频自动打码
  3. 深度学习最近发现详细分析报告
  4. 【OpenCV 4开发详解】两图像间的像素操作
  5. 找不到完美数据科学家？你还可以组建一支数据科学梦之队
  6. atitit.mp4 视频文件多媒体格式结构详解
  7. 在Mac上使用Nginx和FastCGI部署Flask应用
  8. 为分支机构和移动人员实施路由的导图
  9. Linux Yum命令(转)
  10. MD5加密 登录用户名密码