纯CSS完成单1div的正多边变形换

日期:2021-01-20 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

上1篇大家详细介绍了怎样运用before和after伪元向来做Material Design设计风格的按钮,里头重要的技术性就在于活用边框宽度和div本体宽高,因而这篇再加码1个实际效果,便是纯碎运用CSS,让“单1个”div,从正3角变形换为正8边形(单1div数最多只能保证正8边形),最终再配搭动漫的实际效果,变为正多边形的转换动漫,也因为正多边形必须用到很多的3角涵数测算,以便便捷起见,这里将正多边形的边统1都设为100px。

正3角形

正3角形不必须用到伪元素,只必须设置div自身的边框宽度便可造成,先看来1下正3角形的边长与中线,若边长为100px,则中线4舍5入便是87px(100 x sin(60)= 87)。

因而大家要将div的长宽都设为0,接着把底部border的宽度设为87px,上下的border宽度设为50px(色调设为全透明transparent),便可以做出1个好看的3角形。

width:0;
height:0;
border-width:0 50px 87px ;
border-style:solid;
border-color:transparent transparent #095;

正方形

正方形应当是最简易的,要是设置长宽设置为一样标值便可以了,但是实际上也有此外两种方式,第1种你能够把长宽设为0,把左右上下的border设为50px还可以,第2种则是高宽比设为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;
}

正5边形

正5边形就必须进到基础的3角涵数行业了,让大家先把正5边形溶解,用本来的div做为上方的3角形,随后用1个伪元素制做正下方的梯形,由于正5边形每边的夹角为108度,因此能够藉由3角涵数测算出上方3角形的高宽比为59px(100 x cos(54)),宽度为192px(100x sin(54)x 2),正下方梯形的高宽比为95px(100 x sin(72)),长边的宽度跟上面的3角形1样全是192px。

掌握基本原理以后,便可以运用伪元向来配搭制做啰!

.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:⑻1px;
  width:100px;
  height:0;
  background:none;
  border-width:95px 31px 0;
  border-style:solid;    
  border-color:#069 transparent transparent;
    }

正6边形

正6边形的每一个夹角是120度,假如以纯CSS的方位看来的话,便是把正5边形上面的3角形更改1下,便可以做出正6边形,也便是变为左右两个梯形的组成罢了,梯形的长边为200px(100 x cos(60)x 2 + 100),梯形的高宽比为87px(100 x sin(60))。

因此要是把正5边形的CSS稍作改动便可以做出正6边形了。

.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:⑸0px;
    width:100px;
    height:0;
  background:none;
    border-width:87px 50px 0;
  border-style:solid;    
    border-color:#f80 transparent transparent;
    }

正7边形

正7边形刚开始就务必再应用after这个伪元素了,由于正7边形务必要拆解为3个运行内存块,各自是用本来的div做为上面的3角形,1个伪元素做为正中间的梯形,随后另外一个伪元素做为底部的梯形,正7边形的夹角较为非常并不是整数金额,而是128又4/7度,大约取到小数第2位是128.57,因此测算起来結果就以下图所示,关键便是务必要清晰地了解长宽是是多少。
 


 

有了长宽以后,就刚开始用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:⑴12px;
    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:⑴12px;
    width:180px;
    height:0;
    border-width:0 22px 97px;
    background:none;
    border-style:solid;
    border-color:transparent transparent #09c;
  }

正8边形

正8边形实际上便是把正7边形上面的3角变形成梯形,随后正中间的梯变形成矩形框就搞定了,正8边形的夹角为135度,测算出来的各个地区长宽以下图。
 


 

一样的掌握基本原理,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:⑺1px;
      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:⑺1px;
      width:242px;
      height:0;
      border-width:0 0 100px;
      background:none;
      border-style:solid;
      border-color:transparent transparent #f69;
  }

小结

以上便是纯碎运用CSS做出来的单1div的正多边变形换,假如娴熟的话,实际上再加动漫实际效果,便可以做出像下面示例这个模样的转换动漫啰!但是下面的示例有再此外用1个div包出外面做尺寸的转换动漫,防止由于尺寸的转换导致对接处的不密合,大伙儿能够参照看看喔!

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:CSS3 @media的基础用法总结 返回下一篇:没有了