css样式画多边形,html多边形

css多边形的层怎么做

css不同的多边形的层写法是不同的。

成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站建设、做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的彭水苗族土家族网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

一、梯形代码：

.triangle {

border-bottom: 100px solid #F36823;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

height: 0;

width: 100px;

}

二、六角星代码：

.triangle{

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

position: relative;

}

.triangle: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;

}

3、五角星代码：

.triangle{

margin: 50px 0;

position: relative;

display: block;

color: #F36823;

width: 0px;

height: 0px;

border-right:  100px solid transparent;

border-bottom: 70px  solid #F36823;

border-left:   100px solid transparent;

-moz-transform:    rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform:     rotate(35deg);

-o-transform:      rotate(35deg);

}

.triangle:before {

border-bottom: 80px solid #F36823;

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

}

.triangle:after {

position: absolute;

display: block;

color: #F36823;

top: 3px;

left: -105px;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid #F36823;

border-left: 100px solid transparent;

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

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

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

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

content: '';

}

4、六边形代码：

.triangle{

width: 100px;

height: 55px;

background: #F36823;

position: relative;

}

.triangle: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 #F36823;

}

.triangle: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 #F36823;

}

css3 多边形div设计 问题

　css不同的多边形的层写法是不同的。

一、梯形代码：

.triangle {

border-bottom: 100px solid #F36823;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

height: 0;

width: 100px;

}

二、六角星代码：

.triangle{

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

position: relative;

}

.triangle: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;

}

3、五角星代码：

.triangle{

margin: 50px 0;

position: relative;

display: block;

color: #F36823;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid #F36823;

border-left: 100px solid transparent;

-moz-transform: rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

}

.triangle:before {

border-bottom: 80px solid #F36823;

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

}

.triangle:after {

position: absolute;

display: block;

color: #F36823;

top: 3px;

left: -105px;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid #F36823;

border-left: 100px solid transparent;

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

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

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

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

content: '';

}

4、六边形代码：

.triangle{

width: 100px;

height: 55px;

background: #F36823;

position: relative;

}

.triangle: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 #F36823;

}

.triangle: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 #F36823;

纯css实现旋转的金字塔

css是个神奇的东西，在学习的过程中你会发现绘画和艺术的美,金字塔是世界八大奇迹之一，设计精巧，计算精密，令世人赞叹。那么如何用CSS画一个金字塔呢？

人丑话不多，先看一下效果

金字塔是由5个面组成的，即4个侧面和1个底面。我们可以把它看作是一个童年时期玩过的元宝，或者端午节戴在身上的福字。为什么这么说呢？

“横看成岭侧成峰”，我们看金字塔的俯视图是不是会看到这样一个图形，如下图所示

这是一个平面图形，如果让这个平面图形具有立体的效果不就是一个金字塔了么。即将上图的(0,0)沿着x轴旋转一定角度即可实现。

接下来就是绘制“元宝”的形状,侧面是4个三角形，底面是一个正方形。实现三角形可以采用 clip-path 的属性对可视区域进行裁剪。

由上图可知： clip-path 的只能兼容 高版本浏览器 。polygon代表多边形，所以利用该属性可以绘制多如下图形：

有了上述的图形之后，我们需要进行特殊的处理，才能得到我们想要的形状。因为我们要搭建金字塔，所有我们塔边的高度或者宽度需要大于底部的宽度和长度，不然的话无法搭成塔尖而形成如下图形：

故需设置大于底部宽和高,我们这里选取为高度为200px，宽度为100px，宽度需要和底部宽度保持一致。

假设我们现在已经有一个金字塔，我们可以取它的一个横截面如下图：

通过sin函数

解上面反三角函数求得A大约为75deg，以此类推我们可以算出其他图形旋转角度。

将上述的两种三角形通过适当的平移和旋转，得到如下图形：

合并之后得到如下图形

通过使用css3中的3D转化属性，将上图进行转化即可：

由上图可知：transform-style:preserve-3d兼容是支持高版本浏览器，支持部分ie浏览器

以上就是本文的全部内容，全部都是由css实现包括：

在css中如何写出多边形的图形来

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titlecss graph/title

style type="text/css" media="screen"

/*五边形*/

#pentagon {

position: relative;

width: 54px;

border-width: 50px 18px 0;

border-style: solid;

border-color: #f66 transparent;

margin: 50px 0px 20px 20px;

}

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

}

/*六边形*/

#hexagon {

width: 100px;

height: 55px;

background: #f66;

position: relative;

margin: 50px 0px 50px 20px;

}

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

}

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

}

/*八边形*/

#octagon {

width: 100px;

height: 100px;

background: #f66;

position: relative;

}

#octagon:before {

content: "";

position: absolute;

top: 0;

left: 0;    

border-bottom: 29px solid #f66;

border-left: 29px solid #fff;

border-right: 29px solid #fff;

width: 42px;

height: 0;

}

#octagon:after {

content: "";

position: absolute;

bottom: 0;

left: 0;    

border-top: 29px solid #f66;

border-left: 29px solid #fff;

border-right: 29px solid #fff;

width: 42px;

height: 0;

}

/style

/head

body

span style="font-size:27px;"CSS graph/span

div id="pentagon"/div五边形br /

div id="hexagon"/div六边形br /

div id="octagon"/div八边形br /

/body

/html

CSS3知识汇总16：clip-path

2021年2月19日学习笔记

【椭圆】

【半椭圆】

沿纵轴对称，如果传4个值，分别从左上角开始以顺时针应用到各个拐角，如果提供3个值，意味着第4个值与第2个值相同

4个角还可以有不同的水平和垂直半径，在斜杠前指定1~4个值，在斜杠后指定1~4个值

当border-radius: 10px / 5px 20px时，相当于

border-radius: 10px 10px 10px 10px / 5px 20px 5px 20px;

【四分之一椭圆】

其中一个角的水平和垂直半径值都需要是100%，而其他三个角都不能设为圆角

【扩展练习】

【平行四边形】

【平行四边形--伪元素】

【八角形】

【菱形】

需要图片的宽度与容器的对角线相等，而max-width: 100%是边长相等

scale()变形样式，是以它的中心点进行缩放的，除非额外指定了transform-origin

通过width属性来放大图片时，只会以它的左上角为原点进行缩放，需要负外边距调整

【裁切路径方案clip-path菱形】

【相关知识点】

clip-path属性 可以防止部分元素通过定义的剪切区域来显示（目前兼容性较差，IE和Edge不支持）

生成器

一、基本图形

inset()矩形（上右下左的边距round上右下左圆角）

inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）

circle圆形

circle()可以传人2个可选参数：

1. 圆的半径，默认元素宽高中短的那个为直径，支持百分比

2. 圆心位置，默认为元素中心点

半径公式

如果半径使用百分比：圆的半径 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比

ellipse椭圆

ellipse()可以传人3个可选参数；

1. 椭圆的X轴半径，默认是宽度的一半，支持百分比

2. 椭圆的Y轴半径，默认是高度的一半，支持百分比

3. 椭圆中心位置，默认是元素的中心点

二、多边形polygon--正三角形

x: 0, y:100% 从元素的左上角开始，并从那里开始移动

x: 50%, y: 0

x: 100%, y: 100%  元素右边，元素底部

从左下角x: 0, y:100%开始，水平移动到50%，然后垂直向上到达顶部的坐标点（第二个点），接着水平移动到100%的位置，最后垂直向下回到底部，到达第三个坐标点

正方形

从左上角开始，垂直向下100%第二个点，平移100%第三个点，垂直向上0第四个点

正五边形  59/（59+95）=38.31%，31/（81*2）=19.14%

162/2 = 81

59是上面三角形的高度

95是下面三角形的高度

31是下面四边形的高度

正六边形  50/（100+50 2）=25%，150/（100+50 2）=75%

50 是左边三角形的高度

100 是边长

正七边形 

22/（100+62 2）=10.09%

202/（100+62 2）=90.18%

43/（43+97+78）=19.72%

（43+97）/（43+97+78）=64.22%

62/（100+62 2）=27.68%

（100+62）/（100+62 2）=72.32%

正八边形

71/（100+71 2）=29.34%

（71+100）/（100+71 2）=70.66%

五角星

红叉叉

标签

也可用于动画中

如果觉得百分比不好计算，可以换算成px

下面就是第一个点的计算方法

35.00%*800=280px

29.75%*400=119px

只要两个 clip-path，其中包含的点个数相同，在animation的帧内部就可以线性切换了

如果不同是没有效果的

小技巧，如果点不够，可以将两个坐标点进行重合即可

推荐网址：

30个动物全部使用CSS3写的。超牛

css 编写的多边形能够设置圆角么？

多边形是可以设置圆角，但如果五边形和六边形是由三角形和四边形组合而成，不建议设置圆角，设置后，达不到理想效果，不过四边形和八边形是可以的，也可以组装。

代码如下，供参考，请在IE9或Chrome上运行：

html

head

title多边形圆角/title

style

#parallelogram{

width: 200px;

height: 100px;

margin-left: 30px;

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

-moz-transform: skew(200deg);

-o-transform: skew(200deg);

background-color: red;

border-radius:10px;

}

#burst-8{

width: 80px;

height: 80px;

background-color: red;

text-align: center;

position: relative;

top:100px;

left:100px;

transform:rotate(20deg);

-webkit-transform:rotate(20deg);

-ms-transform:rotate(20deg);

-moz-transform:rotate(20deg);

-o-transform:rotate(20deg);

border-radius:10px;

}

#burst-8:before{

width: 80px;

height: 80px;

top: 0;

left: 0;

background-color: red;

position: absolute;

content: "";

transform:rotate(135deg);

-webkit-transform:rotate(135deg);

-ms-transform:rotate(135deg);

-moz-transform:rotate(135deg);

-o-transform:rotate(135deg);

border-radius:10px;

}

/style

/head

body

div id="parallelogram"五边形圆角为10px，在IE9或Chrome上运行/div

div id="burst-8"八边形/div

/body

/html