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

[img]
当前名称:css样式画多边形,html多边形
网页链接:http://pwwzsj.com/article/dsopidh.html