Corners

by davidxmartins

HTML

<div class="container">
  <div class="triangle top-right"></div>
  <div class="triangle bottom-left"></div>
  <h1>
kajsdhkajshdkajshd
</h1>
<p>
laksdj laksdj lakjsd lakjsdl akjsd lakjsdl kajs ldkjalsdkj laksjd lakjds lakjsd lkajds lkajds lkajsd lkajsd lkaj sdlkja sdlkja lsdkja ldskjal skdj laksjdlakjdslkajsdlkjal dskjaldksjlaksjd lakjdsl kajd lkajd lakjsdlkajsd laksjd laksjd laskdjlakjsd lakjd lakjsdlakjds alksdj lakjsd laksdjlakjsdlaksdj laksdj laksdjlaksjd lakdsj laksdj lakslaksdj laksdj lakjsd lakjsdl akjsd lakjsdl kajs ldkjalsdkj laksjd lakjds lakjsd lkajds lkajds lkajsd lkajsd lkaj sdlkja sdlkja lsdkja ldskjal skdj laksjdlakjdslkajsdlkjal dskjaldksjlaksjd lakjdsl kajd lkajd lakjsdlkajsd laksjd laksjd laskdjlakjsd lakjd lakjsdlakjds alksdj lakjsd laksdjlakjsdlaksdj laksdj laksdjlaksjd lakdsj laksdj laks
</p>
</div>

CSS

.container {
  width: 100%;
  max-width: 1200px;
  background-color: grey;
  position: relative;
  overflow: hidden;
  padding: 50px;
  box-sizing: border-box;
}

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.triangle.top-right {
  border-width: 0 50px 50px 0;
  border-color: transparent white transparent transparent;
  top: 0;
  right: 0;
}

.triangle.bottom-left {
  border-width: 0 50px 50px 0;
  border-color: transparent transparent white transparent;
  bottom: 0;
  left: 0;
}