title: Giving an element with a diagonal edge a border?
body: <p>I want to give this element a border thats wraps fully around with that annoying space at the top right, I can't figure it out. Anyone able to help? I can't find anything that tells me how to this exactly. I'd prefer css only but I'm open to whatever fixes this.</p>
  
  <p>here's what it looks like right now: <a href="https://i.imgur.com/lLOnMfb.png" rel="nofollow noreferrer">https://i.imgur.com/lLOnMfb.png</a></p>
  
  <p>and here's the code I have:</p>
  
  <p>css:</p>
  
  <pre><code>.box {
      height: 50px;
      background: white;
      position: relative;
      width:340px;
      margin:auto;
      border-radius:4px;
      padding:15px;
      border:10px solid black;
  }
  
  .box:before {
      content: '';
      position: absolute;
      top: 0; right: 0;
      border-top: 40px solid gray;
      border-left: 40px solid white;
      width: 0;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="zer0"&gt;text&lt;/div&gt;
  </code></pre>