title: How to make 4 corner geometric objects with CSS?
body: <p>How to make 4 corner geometric objects with CSS?</p>
  
  <p><img src="https://i.stack.imgur.com/sOhp9.png" alt="How can I make a figure in the picture with CSS?"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background: #d0d0d0;
  }
  .select {
      width: 60px;
      height: 60px;
      background: white;
      display: block;
      position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="select"&gt;
      &lt;div style=" height: 2px; width: 15%; background: red; position: absolute; top: 0; "&gt;&lt;/div&gt;
      &lt;div style=" height: 15%; width: 2px; background: red; position: absolute; top: 0; "&gt;&lt;/div&gt;
      &lt;div style=" height: 2px; width: 15%; background: red; position: absolute; bottom: 0; "&gt;&lt;/div&gt;
      &lt;div style=" height: 15%; width: 2px; background: red; position: absolute; bottom: 0; "&gt;&lt;/div&gt;
      &lt;div style=" height: 2px; width: 15%; background: red; position: absolute; right: 0; top: 0; "&gt;&lt;/div&gt;
      &lt;div style=" height: 15%; width: 2px; background: red; position: absolute; right: 0; top: 0; "&gt;&lt;/div&gt;
      &lt;div style=" height: 2px; width: 15%; background: red; position: absolute; bottom: 0; right: 0; "&gt;&lt;/div&gt;
      &lt;div style=" height: 15%; width: 2px; background: red; position: absolute; bottom: 0; right: 0; "&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/gndfzsLw/" rel="nofollow noreferrer">https://jsfiddle.net/gndfzsLw/</a></p>