前言
之前有一次在网上找CSS特效，找到这个正六边形的，颇为有趣。了解到了CSS中 clip-path 属性，它可以设计出平时设计稿中比较难实现的几何图形。另外，UP也对该特效进行优化改进，然后分享给大家。
一、clip-path 说明
（1）clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。
二、示例代码
（1）/src/views/Example/RegularHexagon/index.vue
<template>
<div class="index">
<ul>
<li>
<div class="outer_regular_hexagon">
<div class="inner_regular_hexagon">
<span>你好世界！</span>
</div>
</div>
</li>
<li>
<div class="outer_regular_hexagon">
<div class="inner_regular_hexagon">
</div>
</div>
</li>
<li>
<div class="outer_regular_hexagon">
<div class="inner_regular_hexagon">
</div>
</div>
</li>
<li>
<div class="outer_regular_hexagon">
<div class="inner_regular_hexagon">
</div>
</div>
</li>
<li>
<div class="outer_regular_hexagon">
<div class="inner_regular_hexagon">
</div>
</div>
</li>
<li>
<div class="outer_regular_hexagon">
<div class="inner_regular_hexagon">
</div>
</div>
</li>
<li>
<div class="outer_regular_hexagon">
<div class="inner_regular_hexagon">
</div>
</div>
</li>
</ul>
</div>
</template>
<style lang="less" scoped>
.index {
width: 100%;
height: 100%;
display: grid;
align-items: center;
text-align: center;
background-color: #fafafa;
ul {
display: flex;
margin: auto;
li {
display: inline-block;
position: relative;
width: 90px;
height: 152px;
transition: 0.5s border-color;
cursor: pointer;
margin: 3px 28px;
background-color: rgba(134, 134, 134, 0.8);
&:before {
content: "";
position: absolute;
z-index: 1;
width: calc(100%);
height: calc(100% + 0px);
left: 0;
top:0px;
transform: rotate(61deg);
background-color: rgba(92, 123, 224, 0.8);
}
&:after {
content: "";
position: absolute;
z-index: 2;
width: calc(100%);
height: calc(100% + 0px);
left: 0;
top: 0;
transform: rotate(-61deg);
background-color: rgba(92, 123, 224, 0.8);
}
.outer_regular_hexagon {
position: absolute;
z-index: 99;
width: 200%;
height: 100%;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
background-color: rgba(92, 123, 224, 0.8);
transition: all 0.8s ease-in-out;
.inner_regular_hexagon {
display: grid;
align-items: center;
position: absolute;
width: calc(100% - 2px);
height: calc(100% - 2px);
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
background-color: #fff;
transition: all 0.3s ease-in-out;
text-align: center;
span {
display: block;
width: 97px;
margin: auto;
padding: 10px;
font-size: 14px;
transition: all 0.3s ease-in-out;
}
}
}
}
li:nth-child(even) {
margin-top: 80px;
}
li:hover {
.outer_regular_hexagon {
.inner_regular_hexagon {
background-color: #5e7ce0;
span {
color: #fff;
}
}
}
}
}
}
</style>
三、运行效果
