How to Cut Corners With Pure CSS

If you want to give your Website a non-standard and attractive style, then read this snippet and learn to cut corners like the corner of a page has been folded down. This is too easy as you have the opportunity to do it with pure CSS. Let’s try to create one together.

We can create such an effect with the help of CSS pseudo-elements, in the case where the parent element' background has a solid color.

Create HTML

Use the HTML <div> tag.

<div></div>

Add CSS

Style the <div> element by specifying its height and background-color. Use the “relative” value of the position property to position the <div> element relative to its normal position.
Style the cut corner with the ::before pseudo-element and use the content property required while using the :: before pseudo-element to generate and insert content. Set the position to "absolute" and add the top and right, border-top and border-right properties.

div {
  height: 300px;
  background-color: yellow;
  position: relative;
}

div:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-top: 80px solid white;
  border-left: 80px solid red;
  width: 0;
}

Now let’s put it all together and see the result.

Example of cutting a corner:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 300px;
        background: yellow;
        position: relative;
      }
      div:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        border-top: 80px solid white;
        border-left: 80px solid yellow;
        width: 0;
      }
    </style>
  </head>
  <body>
    <div>We can create a cut corner effect with the help of CSS pseudo-elements, in the case where the parent element has a solid color background.</div>
  </body>
</html>

Try it Yourself »

Result

We can create a cut corner effect with the help of CSS pseudo-elements, in the case where the parent element has a solid color background.

An alternative way of getting such an effect is using the CSS clip-path property. As it uses SVG to create the shape, it reacts straight out of the box.

Example of cutting a corner with the CSS clip-path property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 200px;
        min-height: 200px;
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
        background: green;
      }
    </style>
  </head>
  <body>
    <div>
      <p>Cut corner effect.</p>
    </div>
  </body>
</html>