CSS 六边形

知更鸟 2021年9月15日15:00:45Web前端来源:互联网评论35阅读模式

1、将六边形拆分为一个矩形+二个三角形,利用伪元素after和before来实现;文章源自知更鸟-https://zmingcx.com/css-hexagon.html

<!--第一种方案:矩形+左右两个三角形来实现-->
<div class="one"></div>
<style>
    .one{
        width: 120px;
        height: 208px;
        background-color: aqua;
        position: relative;
        margin: 0 100px;
    }
    .one:before{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: -60px;
        border-top: 104px solid transparent;
        border-bottom: 104px solid transparent;
        border-right: 60px #0f0 solid;
        border-left:none;
    }
    .one:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: 120px;
        border-top: 104px solid transparent;
        border-bottom: 104px solid transparent;
        border-right: none;
        border-left:60px #0f0 solid;
    }
</style>

2、利用overflow:hidden + css3中的transform:rotate旋转不同角度来实现;文章源自知更鸟-https://zmingcx.com/css-hexagon.html

  <!--第二种方案:rotate + overflow:hidden来实现-->
    <div class="first">
        <div class="two">
            <div class="three">
            </div>
        </div>
    </div>
<style>
   .first{
        width: 200px;
        height: 250px;
        overflow: hidden;
        transform: rotate(120deg);
    }
    .two{
        width: 100%;
        height: 100%;
        overflow: hidden;
        transform: rotate(-60deg);
    }
    .three{
        width: 100%;
        height: 100%;
        overflow: hidden;
        transform: rotate(-60deg);
        background: red;
    }
</style>
文章源自知更鸟-https://zmingcx.com/css-hexagon.html
weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定