Как делать блоки такого вида?

* { 
  margin: 0; 
  padding: 0; 
} 
 
.container { 
  width: 100%; 
  height: 100%; 
}

<div class="container"> 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-10 -10 500 500">  
    <polygon points="0,0 50,0 65,15 160,15 160,100 0,100" stroke="gray" fill="none" /> 
    <text x="10" y="30" font-size="24" fill="gray">&#167;</text> 
    <text x="30" y="35" font-size="14" fill="black">TYPOGRAPHY</text>  
    <g font-size="12" fill="gray"> 
      <text x="15" y="50">Lorem ipsum dolor sit,</text> 
      <text x="15" y="62">amet consectetur adipisicing </text> 
      <text x="15" y="74">adipisicing elit Phasellus </text> 
      <text x="15" y="86">tincidunt dignissim nibh</text> 
    </g> 
  </svg> 
</div>

* { 
  margin: 0; 
  padding: 0; 
} 
 
.container { 
  width: 100%; 
  height: 100%; 
}

<div class="container"> 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-10 -10 500 500"> 
    <defs> 
      <filter id="dropshadow" width="130%" height="130%"> 
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>  
        <feOffset dx="2" dy="2" result="offsetblur"/>  
      </filter> 
    </defs>     
    <polygon transform="translate(2 2)" points="0,0 50,0 65,15 160,15 160,100 0,100" fill="rgba(0,0,0,0.5)" filter="url(#dropshadow)"/> 
    <polygon points="0,0 50,0 65,15 160,15 160,100 0,100" stroke="gray" fill="white" fill-opacity="1"/> 
    <text x="10" y="30" font-size="32" fill="gray">&#167;</text> 
    <text x="35" y="35" font-size="14" fill="black">TYPOGRAPHY</text>  
    <g font-size="12" fill="gray"> 
      <text x="15" y="50">Lorem ipsum dolor sit,</text> 
      <text x="15" y="62">amet consectetur adipisicing</text> 
      <text x="15" y="74">adipisicing elit Phasellus</text> 
      <text x="15" y="86">tincidunt dignissim nibh</text> 
    </g> 
  </svg> 
</div>

* { 
  margin: 0; 
  padding: 0; 
} 
 
.wrapper { 
  position: relative; 
  max-width: 250px; 
  margin: 3rem; 
  padding: 1rem; 
  border: 1px solid gray; 
} 
 
.angle, 
.in, 
.in2, 
.in2::before { 
  position: absolute; 
  height: 30px; 
} 
 
.angle { 
  overflow: hidden; 
  width: 160px; 
  top: -30px; 
  left: -1px; 
} 
 
.in { 
  top: 0; 
  left: -10px; 
  width: 150px; 
  background-color: gray; 
  transform: skew(25deg); 
} 
 
.in2 { 
  top: 1px; 
  left: 1px; 
  width: 130px; 
  background-color: white; 
} 
 
.in2::before { 
  content: ""; 
  position: absolute; 
  right: -8.4px; 
  width: 25px; 
  background-color: white; 
  transform: skew(25deg); 
} 
 
.text { 
  max-width: 350px; 
  word-spacing: 3px; 
}

<div class="wrapper"> 
  <div class="angle"> 
    <div class="in"></div> 
    <div class="in2"></div> 
  </div> 
  <div class="text"> 
    <h1>Lorem</h1> 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro necessitatibus deleniti perspiciatis excepturi quia facere? Porro necessitatibus deleniti perspiciatis excepturi quia facere?</p> 
  </div> 
</div>

* { 
  margin: 0; 
  padding: 0; 
} 
 
h2 { 
  margin: 1rem 0.3rem 0 0.3rem; 
} 
 
p { 
  font-size: 13px; 
  padding: 0 0.3rem; 
}  
.container { 
width:100%; 
height:100%; 
}

<div class="container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-10 -10 500 500"> 
  <polygon points="0,0 50,0 65,15 130,15 130,100 0,100" stroke="gray" fill="none"/> 
  <foreignObject width="150"> 
    <h2>Lorem</h2> 
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p> 
  </foreignObject> 
</svg> 
</div>

.block, 
.block:before { 
   clip-path: polygon(0 0, 50% 0, 70% 20%, 100% 20%, 100% 100%, 0 100%); 
   z-index: -1; 
} 
.block { 
  width: 200px; 
  height: 200px; 
  background-color: black; 
  position: relative; 
} 
 
.block:before { 
  content: ''; 
  width: 198px; 
  height: 198px; 
  background: white; 
  display: block; 
  position: absolute; 
  top: 1px; 
  left: 1px; 
} 
.inner { 
  padding: 50px 10px 10px; 
}

<div class="block"><div class="inner">Lorem text</div></div>