CSSで画像をデザインするには

Question

How to design This Image

このタイプの画像をデザインしたいと思います。

Answer 1

.container { 
 
    background: #fff; 
 
    padding: 20px; 
 
} 
 
.round { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: solid 2px #000; 
 
    position: relative; 
 
} 
 

 
.round:before { 
 
    content: ''; 
 
    width: 20px; 
 
    height: 20px; 
 
    background: #fff; 
 
    border-bottom: solid 2px #000; 
 
    position: absolute; 
 
    top: -12px; 
 
    left: -11px; 
 
    transform: rotate(315deg); 
 
} 
 

 
.round:after { 
 
    content: ''; 
 
    width: 20px; 
 
    height: 20px; 
 
    background: #fff; 
 
    border-top: solid 2px #000; 
 
    position: absolute; 
 
    bottom: -12px; 
 
    right: -11px; 
 
    transform: rotate(315deg); 
 
}

<div class="container"> 
 
<div class="round"></div> 
 
</div>

帽子あなたは思いますか？

Answer 2

おそらく、インラインsvgイメージを使ってみると、背景イメージを制御し、シェイプが「拡大縮小」できるようになり、好きなときは背景色を変更します（fill）。

HTML

<div class="cornered-box"> 
    <div class="svg-cont"> 
     <svg width="200px" height="200px" viewBox="635 375 202 202" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
      <defs> 
       <polygon id="path-1" points="675.163277 376 836 376 836 535.221624 796.221624 575 636 575 636 414.163277"></polygon> 
      </defs> 
      <use stroke="#000000" stroke-width="2" fill="transparent" xlink:href="#path-1"></use> 
     </svg> 
    </div> 
    <div class="cornered-box-content"> 
     <p> 
      Some content for the box 
     </p> 
    </div> 
</div> 

CSS

.cornered-box{ 
    height:200px; 
    width:200px; 
    position: relative; 
    padding:20px 5px; 
    box-sizing:border-box; 
} 
.cornered-box .svg-cont{ 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    z-index:-1; 
} 
.cornered-box .svg-cont svg{ 
    height:100%; 
    width:100%; 
} 
.cornered-box .svg-cont svg use{ 
    fill:transparent; 
    transition: fill 0.2s ease-in-out; 
} 
.cornered-box:hover .svg-cont svg use{ 
    fill:#F00; 
} 

JSFIDDLE

Link to SVG