css做八边形图片有边框

用css样式实现，八边形图片有边框并边框和图片有间距的，请多多指教
css部分

.pictrue{
　　box-sizing: border-box;
　　position: relative;
　　width: 400px;
　　height: 400px;
　　transform: rotate(45deg);
　　overflow: hidden;
}
.pictrue .item{
　　box-sizing: border-box;
　　padding: 10px;
　　position: absolute;
　　width: 100%;
　　height: 100%;
　　content:" ";
　　transform: rotate(-45deg);
　　border: 1px solid red;
　　overflow: hidden;
　　background-color: #fff;
}
.pictrue .item:after{
　　position: absolute;
　　top: -1px;
　　left: -1px;
　　content:" ";
　　width: 100%;
　　height: 100%;
　　transform: rotate(135deg);
　　border: 1px solid red;
}
.pictrue .item:before{
　　position: absolute;
　　left: 0;
　　top: 0;
　　box-sizing: border-box;
　　content:" ";
　　width: 100%;
　　height: 100%;
　　transform: rotate(135deg);
　　border: 10px solid #fff;
}
.pictrue .item img{
　　max-width: 100%;
}

html部分

<div class="pictrue">
　　<div class="item">
　　　　<img src="01.jpg">
　　</div>
</div>

效果图

 

 

 

01.jpg

 

转载于:https://www.cnblogs.com/yingyuan/p/7018614.html