<div class="imageFrame--type002">
  <figure class="button__image"><span>
    <img src="画像のパス" width="" height="" alt="" />
  </span></figure>
</div>
                

.imageFrame--type002 {
  display:block;
  position:relative;
  figure{
    padding:0.2em;
    background:#000;
    position:relative;
    display:block;
    &::before,&::after{
      content:"　";
      width:0.5em;
      height:0.5em;
      display:block;
      border-style:solid;
      border-width:0.5em;
      position:absolute;
    }
    &::before{
      border-color:#000 transparent transparent #000;
      top:0;
      left:0;
    }
    &::after{
      border-color:transparent #000 #000 transparent;
      bottom:0;
      right:0;
    }
    img{
      width:100%;
      height:auto;
    }
    span{
      display:block;
      &::before,&::after{
        content:"　";
        width:0.5em;
        height:0.5em;
        display:block;
        border-style:solid;
        border-width:0.5em;
        position:absolute;
        z-index:1;
      }
      &::before{
        border-color:#000 transparent transparent #000;
        transform:scale(-1,1);
        top:0;
        right:0;
      }
      &::after{
        border-color:transparent #000 #000 transparent;
        transform:scale(-1,1);
        bottom:0;
        left:0;
      }
    }
  }
}