只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?

[复制链接]

下载APP可以快速和圈友联系

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?-1.jpg

给你一个div,你能用CSS绘制一个正三角形、正方形、正五边形、正六边形、正七边形、正八边形吗?

明天我们来玩一个风趣的CSS尝试,设想下,只用一个div,你能用CSS绘制一个正三角形、正方形、正五边形、正六边形、正七边形、正八边形吗?明天笔者带着大师一路脱手理论下这个风趣的联系,由于正多边形用到很多三角函数计较,为了方便计较,这里正多边形同一设定为100px,为啥只做到正八边形?由于就一个div最多只能做到正八边形。

正三角形

正三角形不需要用到伪元素,只需要设定div自己的边框宽度即可发生,先来看一下正三角形的边长与中线,若边长为100px,则中线四舍五入就是87px ( 100 x sin(60) = 87 )。

只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?-2.jpg

是以我们要将div的长宽都设为0,接着把底部border的宽度设为87px,左右的border宽度设为50px (色彩设为通明transparent ),便可以做出一个标致的三角形。
width:0;
height:0;
border-width:0 50px 87px ;
border-style:solid;
border-color:transparent transparent #095;

只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?-3.jpg

正方形

正方形应当是最简单的,只要设定长宽设定为一样数值便可以了,不外实在还有别的两种方式,第一种你可以把长宽设为0,把高低左右的border设为50px也可以,第二种则是高度设为0,宽度设为100px,然后某个边宽也设为100,都是可以的。
.a{
width:100px;
height:100px;
background:#c00;
}
.b{
width:0;
height:0;
border-width:50px;
border-style:solid;
border-color:#095;
}
.c{
width:100px;
height:0;
border-width:0 0 100px;
border-style:solid;
border-color:#069;
}

只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?-4.jpg

正五边形

正五边形就需要进入根基的三角函数范畴了,实在晓得了道理还是蛮简单的。让我们先把正五边形分化,用原本的div作为上方的三角形,然后用一个伪元素建造下方的梯形,由于正五边形每边的夹角为108度,所以可以藉由三角函数计较出上方三角形的高度为59px ( 100 x cos(54) ),宽度为192px ( 100 x sin(54) x 2 ),下方梯形的高度为95px ( 100 x sin(72) ),长边的宽度跟上面的三角形一样都是192px。

只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?-5.jpg

领会道理以后,便可以操纵伪元素来搭配建造啰!
.a{
position:relative;
width:0;
height:0;
border-width:0 81px 59px;
border-style:solid;
border-color:transparent transparent #069;
}
.a:before{
position:absolute;
content:"";
top:59px;
left:-81px;
width:100px;
height:0;
background:none;
border-width:95px 31px 0;
border-style:solid;
border-color:#069 transparent transparent;
}

只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?-6.jpg

正六边形

正六边形的每个夹角是120度,假如以纯CSS的偏历来看的话,就是把正五边形上面的三角形改变一下,便可以做出正六边形,也就是酿成高低两个梯形的组合而已,梯形的长边为200px ( 100 x cos(60) x 2 + 100 ),梯形的高度为87px ( 100 x sin(60) )。

只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?-7.jpg

所以只要把正五边形的CSS稍作点窜便可以做出正六边形了。
.a{
position:relative;
width:100px;
height:0;
border-width:0 50px 87px;
border-style:solid;
border-color:transparent transparent #f80;
}
.a:before{
position:absolute;
content:"";
top:87px;
left:-50px;
width:100px;
height:0;
background:none;
border-width:87px 50px 0;
border-style:solid;
border-color:#f80 transparent transparent;
}

只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?-8.jpg

正七边形

正七边形起头就必须再利用after 这个伪元素了,由于正七边形必必要拆解为三个区块,别离是用原本的div 作为上面的三角形,一个伪元素作为中心的梯形,然后另一个伪元素作为底部的梯形,正七边形的夹角比力特别不是整数,而是128又4/7 度,大要取到小数第二位是128.57,所以计较起来成果就以下图所示,重点就是必必要清楚地晓得长宽是几多。

只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?-9.jpg

有了长宽以后,就起头用CSS来写啰!
.a{
position:relative;
width:0;
height:0;
border-width:0 90px 43px;
border-style:solid;
border-color:transparent transparent #09c;
}
.a:before{
position:absolute;
content:"";
top:140px;
left:-112px;
width:100px;
height:0;
border-width:78px 62px 0;
border-style:solid;
border-color:#09c transparent transparent;
}
.a:after{
position:absolute;
content:"";
top:43px;
left:-112px;
width:180px;
height:0;
border-width:0 22px 97px;
background:none;
border-style:solid;
border-color:transparent transparent #09c;
}

只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?-10.jpg

正八边形

正八边形实在就是把正七边形上面的三角形酿成梯形,然后中心的梯形酿成矩形就搞定了,正八边形的夹角为135 度,计较出来的各个地区长宽以下图。

只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?-11.jpg

一样的领会道理,CSS做起来就简单多啰!
.a{
position:relative;
width:100px;
height:0;
border-width:0 71px 71px;
border-style:solid;
border-color:transparent transparent #f69;
}
.a:before{
position:absolute;
content:"";
top:171px;
left:-71px;
width:100px;
height:0;
border-width:71px 71px 0;
border-style:solid;
border-color: #f69 transparent transparent;
}
.a:after{
position:absolute;
content:"";
top:71px;
left:-71px;
width:242px;
height:0;
border-width:0 0 100px;
background:none;
border-style:solid;
border-color:transparent transparent #f69;
}

只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?-12.jpg

加点料:动起来!

以上就是纯洁操纵CSS做出来的单一div的正多边形变更,能否是很好玩,一个div能做出来这么多外形,能否是很过瘾,不外瘾的话,我们加点料来点动画,实在加上动画结果,便可以做出像下面典范这个样子的变更动画啰!不外下面的典范笔者再最外层别的用一个div停止包裹,避免由于巨细的变更形成跟尾处的不自然,大师可以参考看看喔!

只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?-13.jpg

css部分
body{
margin:100px;
}
.s{
position:absolute;
-webkit-animation:s 5s infinite linear alternate;
}
.a{
position:relative;
width:0;
height:0;
border-width:0 50px 87px ;
border-style:solid;
border-color:transparent transparent #095;
-webkit-animation:a 5s infinite linear alternate;
}
.a:before,.a:after{
position:absolute;
content:"";
border-width:0;
border-style:solid;
}
.a:before{
-webkit-animation:ab 5s infinite linear alternate;
}
.a:after{
-webkit-animation:af 5s infinite linear alternate;
}
@-webkit-keyframes a{
0%,5%{
width:0;
height:0;
border-width:0 50px 87px ;
border-color:transparent transparent #095;
}
23%{
width:0;
height:0;
border-width:0 50px 0 ;
border-color:transparent transparent #c00;
}
42%{
width:0;
height:0;
border-width:0 81px 59px;
border-color:transparent transparent #069;
}
61%{
width:100px;
height:0;
border-width:0 50px 87px;
border-color:transparent transparent #f80;
}
80%{
width:0;
height:0;
border-width:0 90px 43px;
border-color:transparent transparent #09c;
}
95%,100%{
width:100px;
height:0;
border-width:0 71px 71px;
border-color:transparent transparent #f69;
}
}
@-webkit-keyframes ab{
0%,5%{
top:87px;
left:-50px;
width:100px;
height:0;
background:#095;
border-width:0;
border-color:#095 transparent transparent;
}
22.99%{
top:0;
left:-50px;
width:100px;
height:100px;
background:#c00;
border-width:0;
border-color:#c00 transparent transparent;
}
23%{
top:0;
left:-50px;
width:100px;
height:0;
background:none;
border-width:100px 0 0;
border-color:#c00 transparent transparent;
}
42%{
top:59px;
left:-81px;
width:100px;
height:0;
background:none;
border-width:95px 31px 0;
border-color:#069 transparent transparent;
}
61%{
top:87px;
left:-50px;
width:100px;
height:0;
border-width:87px 50px 0;
border-color:#f80 transparent transparent;
}
80%{
top:140px;
left:-112px;
width:100px;
height:0;
border-width:78px 62px 0;
border-color:#09c transparent transparent;
}
95%,100%{
top:171px;
left:-71px;
width:100px;
height:0;
border-width:71px 71px 0;
border-color: #f69 transparent transparent;
}
}
@-webkit-keyframes af{
0%,61%{
top:87px;
left:-50px;
width:200px;
height:0;
border-width:0;
background:none;
border-color:transparent transparent #f80;
}
80%{
top:43px;
left:-112px;
width:180px;
height:0;
border-width:0 22px 99px;
background:none;
border-style:solid;
border-color:transparent transparent #09c;
}
95%,100%{
top:71px;
left:-71px;
width:242px;
height:0;
border-width:0 0 100px;
background:none;
border-style:solid;
border-color:transparent transparent #f69;
}
}
@-webkit-keyframes s{
0%,5%{
-webkit-transform:translateX(0) translateY(0) scale(1);
}
23%{
-webkit-transform:translateX(-15px) translateY(-10px) scale(.9);
}
42%{
-webkit-transform:translateX(-50px) translateY(-20px) scale(.8);
}
61%{
-webkit-transform:translateX(-70px) translateY(-25px) scale(.7);
}
80%{
-webkit-transform:translateX(-80px) translateY(-25px) scale(.6);
}
95%,100%{
-webkit-transform:translateX(-100px) translateY(-25px) scale(.5);
}
}

html部分





小节

只用1个div,你能用CSS绘制:正3、4、5、6、7、8边形吗?-14.jpg

明天的内容就到这里,我们简直用一个div,再连系三角函数的相关常识,一口气绘制完了正三角形、正方形、正五边形、正六边形、正七边形、正八边形,能否是很风趣呢。你无妨依照上述示例,亲身脱手试试哦。
温馨提示:
好向圈www.kuaixunai.com是一个专业经验分享交流平台,你可以在这里发布专业经验,也可以发布需求与服务,禁止带推广链接、联系方式、违法词等,违规将封禁账号。 下载好向圈客户端可以随时随地交流经验,也可以和圈友发起聊天成为好友哦!
回复

使用道具 举报

已有(4)人评论

跳转到指定楼层
上海菜乜 发表于 2020-4-24 17:00:17
这个可以,谢楼主
回复

使用道具 举报

什么大捍 发表于 2020-4-24 17:01:27
好玩
回复

使用道具 举报

邓小二1 发表于 2020-4-24 17:04:02
转发了
回复

使用道具 举报

臻宝源掌柜 发表于 2020-4-24 17:09:42
好玩有趣,你也来试试[耶]
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本圈子积分规则