我需要像附件中那样处理图像。 我使用内部图像进行了多边形处理,但是无法添加蓝色观鸟器。我将剪切路径用于具有伪类的多边形。如何添加偏斜的蓝色边框?
.clip-each-blue {
width: 100px;
height: 90px;
position: relative;
}
.clip-each-blue:after {
content: "";
position: absolute;
background: #fff;
}
.clip-each-blue,
.clip-each-blue:after {
-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
background: #4850be;
}
.border-style-thin {
background-color: #4850be;
}
.content-feature-image {
display: block;
outline: 0;
}
.content-feature-image img {
display: block;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: 20px;
z-index: 1;
transform: rotate(-90deg);
}
.border-style-thin:after {
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
}
<section id="polygon">
<div class="clip-wrap">
<div class="clip-each-blue-border">
<div class="clip-each-blue">
<a href="#" class="content-feature-image"><img src="images/section/section_2_icon_1.png" alt="" /></a>
</div>
</div>
</div>
答案 0 :(得分:1)
做到这一点的一种方法是:
.clip-each-blue {
width: 100px;
height: 90px;
position: relative;
}
.clip-each-blue:after {
content: "";
position: absolute;
background: #fff;
}
.clip-each-blue,
.clip-each-blue:after {
-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
transform: rotate(90deg); /* Rotate polygon to match desired output. */
background: #4850be;
}
.border-style-thin {
background-color: #4850be;
}
.content-feature-image {
display: block;
outline: 0;
}
.content-feature-image img {
display: block;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: 20px;
z-index: 1;
transform: rotate(-90deg);
}
.border-style-thin:after {
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
}
/* New stuff. */
.clip-each-blue-border {
position: absolute;
left: 25px;
}
.clip-border {
border: 4px solid #4850be;
width: 140px;
height: 140px;
z-index: -1;
position: absolute;
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
}
.clip-wrap {
position: relative;
}
<section id="polygon">
<div class="clip-wrap">
<div class="clip-each-blue-border">
<div class="clip-each-blue">
<a href="#" class="content-feature-image"><img src="images/section/section_2_icon_1.png" alt="" /></a>
</div>
</div>
<!-- Insert div to transform to isometric frame. -->
<div class="clip-border"></div>
</div>
</section>