Cut Corners using CSS

Question

I'm looking to "cut" the top left corner of a div, like if you had folded the corner of a page down.

I'd like to do it in pure CSS, are there any methods?

Answer 1

If the parent element has a solid color background, you can use pseudo-elements to create the effect:

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

<div></div>

http://jsfiddle.net/2bZAW/

---

P.S. The upcoming border-corner-shape is exactly what you're looking for. Too bad it might get cut out of the spec, and never make it into any browsers in the wild :(

Answer 2

If you need a transparent cut out edge, you can use a rotated pseudo element as a background for the div and position it to cut out the desired corner:

body {    background: url(http://i.imgur.com/k8BtMvj.jpg);    background-size: cover;  }  div {    position: relative;    width: 50%;    margin: 0 auto;    overflow: hidden;    padding: 20px;    text-align: center;  }  div:after {    content: '';    position: absolute;    width: 1100%; height: 1100%;    top: 20px; right: -500%;    background: rgba(255,255,255,.8);    transform-origin: 54% 0;    transform: rotate(45deg);    z-index: -1;  }

<div>    ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>  </div>

Note that this solution uses transforms and you need to add the required vendor prefixes. For more info see canIuse.

To cut the bottom right edge, you can change the top, transform and transform-origin properties of the pseudo element to:

body {    background: url(http://i.imgur.com/k8BtMvj.jpg);    background-size: cover;  }  div {    position: relative;    width: 50%;    margin: 0 auto;    overflow: hidden;    padding: 20px;    text-align: center;  }  div:after {    content: '';    position: absolute;    width: 1100%; height: 1100%;    bottom: 20px; right: -500%;    background: rgba(255,255,255,.8);    transform-origin: 54% 100%;    transform: rotate(-45deg);    z-index: -1;  }

<div>    ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>  </div>