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:" ";borderbox
  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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。