一个div 上下两行_纯CSS实现单一div的正多边形变换

纯粹利用CSS,让“单一个”div,从正三角形变换为正八边形(单一div最多只能做到正八边形),最后再搭配动画的效果,变成正多边形的变换动画,也由于正多边形需要用到不少的三角函数计算,为了方便起见,这里将正多边形的边统一都设为100px。

正三角形

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

2583023f8d347cdbb079e56a4e9873e0.png

因此我们要将div的长宽都设为0,接着把底部border的宽度设为87px,左右的border宽度设为50px(颜色设为透明transparent),就可以做出一个漂亮的三角形。

width:0;height:0;border-width:0 50px 87px ;border-style:solid;border-color:transparent transparent #095;专门建立的学习Q-q-u-n:⑦⑧④-⑦⑧③-零①②  ,分享学习的方法和需要注意的小细节
f8af02f4b6b5c03052b6e79cf3f01a7b.png

正方形

正方形应该是最简单的,只要设定长宽设定为同样数值就可以了,不过其实还有另外两种方法,第一种你可以把长宽设为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;}
840d477b8ebbf3fa463aace7bf100850.png

正五边形

正五边形就需要进入基本的三角函数领域了,让我们先把正五边形分解,用原本的div作为上方的三角形,然后用一个伪元素制作下方的梯形,因为正五边形每边的夹角为108度,所以可以藉由三角函数计算出上方三角形的高度为59px(100 x cos(54)),宽度为192px(100x sin(54)x 2),下方梯形的高度为95px(100 x sin(72)),长边的宽度跟上面的三角形一样都是192px。

551c0ac549df53ec859517a2c3146198.png

了解原理之后,就可以利用伪元素来搭配制作啰!

.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;    }
d1d9a88eb0de1d222e76d1212d71bc58.png

正六边形

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

a13c8b69e96a1f2567cb6203d7b88344.png

所以只要把正五边形的CSS稍作修改就可以做出正六边形了。

专门建立的学习Q-q-u-n:⑦⑧④-⑦⑧③-零①②  ,分享学习的方法和需要注意的小细节.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;    }
5a59a1754c2b3b8eca01d6a5d70e5163.png

正七边形

正七边形开始就必须再使用after这个伪元素了,因为正七边形必须要拆解为三个内存块,分别是用原本的div作为上面的三角形,一个伪元素作为中间的梯形,然后另一个伪元素作为底部的梯形,正七边形的夹角比较特别不是整数,而是128又4/7度,大概取到小数第二位是128.57,所以计算起来结果就如下图所示,重点就是必须要清楚地知道长宽是多少。

45bebe602be98b88c77817021b1c1021.png

有了长宽之后,就开始用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;  }
4dd79fd62640e3837db224c46d7aaa7d.png

正八边形

正八边形其实就是把正七边形上面的三角形变成梯形,然后中间的梯形变成矩形就搞定了,正八边形的夹角为135度,计算出来的各个区域长宽如下图。

63432144a573bc51e6acc59eb41eb660.png

同样的了解原理,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;  }专门建立的学习Q-q-u-n:⑦⑧④-⑦⑧③-零①②  ,分享学习的方法和需要注意的小细节
8d27a53fc3e8dbbd5d6f57f6c6b566f6.png

小结

以上就是纯粹利用CSS做出来的单一div的正多边形变换,如果熟练的话,其实加上动画效果,就可以做出像下面示例这个样子的变换动画啰!不过下面的示例有再另外用一个div包在外面做大小的变换动画,避免因为大小的变换造成衔接处的不密合,大家可以参考看看喔!

433b534753161d958365f6123ad94a78.gif
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现Leaflet中的图片联动,你需要使用`leaflet-sync`插件,可以将多个地图同步到一个视口中。要实现点击任一一个绘制的图形(正方形,多边形)单个删除,你需要使用Leaflet.Draw插件,它为Leaflet提供了图形绘制和编辑的功能。 以下是一个基本的示例代码,演示如何同时使用`leaflet-sync`和`Leaflet.Draw`插件: ```html <!DOCTYPE html> <html> <head> <title>Leaflet Sync and Draw Example</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet.sync/0.1.2/leaflet-sync.css" /> <style> #map1, #map2 { position: absolute; top: 0; bottom: 0; width: 50%; } </style> </head> <body> <div id="map1"></div> <div id="map2"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script> <script src="https://cdn.jsdelivr.net/leaflet.sync/0.1.2/leaflet-sync.min.js"></script> <script> // 创建两个地图,并将它们同步到一个视口中 var map1 = L.map('map1').setView([51.505, -0.09], 13); var map2 = L.map('map2').setView([51.505, -0.09], 13); var syncMaps = L.sync(map1, map2); // 添加绘图控件到每个地图 var drawControl1 = new L.Control.Draw({ edit: { featureGroup: syncMaps }, draw: { polygon: true, rectangle: true, circle: false } }); drawControl1.addTo(map1); var drawControl2 = new L.Control.Draw({ edit: { featureGroup: syncMaps }, draw: { polygon: true, rectangle: true, circle: false } }); drawControl2.addTo(map2); // 创建一个特性组,用于存储绘制的图形 var featureGroup = L.featureGroup().addTo(syncMaps); // 监听图形创建事件,并将新创建的图形添加到特性组中 map1.on('draw:created', function (e) { var layer = e.layer; featureGroup.addLayer(layer); }); map2.on('draw:created', function (e) { var layer = e.layer; featureGroup.addLayer(layer); }); // 监听图形编辑事件,以便在编辑过程中保持同步 map1.on('draw:edited', function (e) { syncMaps.sync(); }); map2.on('draw:edited', function (e) { syncMaps.sync(); }); // 监听图形删除事件,并从特性组中删除相应的图形 featureGroup.on('layerremove', function (e) { var layer = e.layer; featureGroup.removeLayer(layer); }); </script> </body> </html> ``` 在上面的示例中,我们创建了两个地图`map1`和`map2`,然后使用`leaflet-sync`插件将它们同步到一个视口中。我们还为每个地图添加了`Leaflet.Draw`控件,以允许用户绘制和编辑图形。当用户在任意一个地图上创建或编辑图形时,它都会自动同步到另一个地图。我们还创建了一个特性组`featureGroup`,用于存储绘制的图形,并在每个地图的`draw:created`事件中将新创建的图形添加到该组中。最后,我们还监听了特性组的`layerremove`事件,以便在删除图形时从特性组中删除相应的图形。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值