我是第一次使用剪辑路径,因此需要在此形状中添加边框。任何人都可以解释我该怎么做?
.image-center {
width: 300px;
height: 300px;
margin: 0 auto;
}
.shape {
width: 300px;
height: 300px;
-webkit-clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);
clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);
}
img {
width: 300px;
height: 300px;
}
<div class="image-center">
<div class="shape">
<img src="http://www.businessadvisorsmd.com/wp-content/uploads/2016/01/masteraccounting-1.jpg" />
</div>
</div>
最佳答案
您可以使用几个阴影滤镜伪造它。没有太多支持,但cli path也没有太多支持...
.image-center {
width: 300px;
height: 300px;
margin: 0 auto;
-webkit-filter: drop-shadow(2px 2px 0px red)
drop-shadow(2px -2px 0px red)
drop-shadow(-2px 2px 0px red)
drop-shadow(-2px -2px 0px red);
filter: drop-shadow(2px 2px 0px red)
drop-shadow(2px -2px 0px red)
drop-shadow(-2px 2px 0px red)
drop-shadow(-2px -2px 0px red);
}
.shape {
width: 300px;
height: 300px;
-webkit-clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);
clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);
}
img {
width: 300px;
height: 300px;
}
<div class="image-center">
<div class="shape">
<img src="http://www.businessadvisorsmd.com/wp-content/uploads/2016/01/masteraccounting-1.jpg" />
</div>
</div>