我试图在我的图像周围制作一个双六边形边框。这是我的小提琴,但并未走远:
https://jsfiddle.net/qeh8wdsd/
代码:
<div class="hex">
<div class="hex inner">
<div class="hex inner2">
<img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg"/>
</div>
</div>
</div>
.hex {
margin-top: 70px;
width: 208px;
height: 120px;
background: #000;
position: relative;
}
.hex:before, .hex:after {
content:"";
border-left: 104px solid transparent;
border-right: 104px solid transparent;
position: absolute;
}
.hex:before {
top: -59px;
border-bottom: 60px solid #000;
}
.hex:after {
bottom: -59px;
border-top: 60px solid #000;
}
.hex.inner {
background-color:blue;
-webkit-transform: scale(.8, .8);
-moz-transform: scale(.8, .8);
transform: scale(.8, .8);
z-index:1;
}
.hex.inner:before {
border-bottom: 60px solid blue;
}
.hex.inner:after {
border-top: 60px solid blue;
}
.hex.inner2 {
background-color:red;
-webkit-transform: scale(.8, .8);
-moz-transform: scale(.8, .8);
transform: scale(.8, .8);
z-index:2;
}
.hex.inner2:before {
border-bottom: 60px solid red;
}
.hex.inner2:after {
border-top: 60px solid red;
}
所以我希望图像是红色六边形的位置,基本上图像应该在里面,然后剪切&#34;到六边形,然后我想要一个蓝色和黑色的边框,每个约2px。第二个问题是我想让它变得敏感。希望有人能帮助我实现这一目标。
答案 0 :(得分:0)
clip-path的CSS属性应该能够为您提供本机寻找的功能,尤其是多边形选项。 您可以定义剪裁的自定义形状,包括六边形,并提供高级别的自定义。 以下是有关此内容的更多信息的链接:css-tricks clip-path