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

We had the problem of different background colors for our cutted elements. And we only wanted upper right und bottom left corner.

body {
 background-color: rgba(0,0,0,0.3)
 
}

.box {
 position: relative;
 display: block;
 background: blue;
 text-align: center;
 color: white;
 padding: 15px;
 margin: 50px;
}

.box:before,
.box:after {
 content: "";
 position: absolute;
 left: 0; 
 right: 0;
 bottom: 100%;
 border-bottom: 15px solid blue;
 border-left: 15px solid transparent;
 border-right: 15px solid transparent;
}

.box:before{
	border-left: 15px solid blue;
}

.box:after{
	border-right: 15px solid blue;
}

.box:after {
 bottom: auto;
 top: 100%;
 border-bottom: none;
 border-top: 15px solid blue;
}


/* Active box */
.box.active{
	background: white;
	color: black;
}



.active:before,
.active:after {
 border-bottom: 15px solid white;
}

.active:before{
	border-left: 15px solid white;
}

.active:after{
	border-right: 15px solid white;
}

.active:after {
 border-bottom: none;
 border-top: 15px solid white;
}

 Some text goes here. Some text goes here. Some text goes here. Some text goes here.
Some text goes here.
Some text goes here.
Some text goes here.
Some text goes here.
Some text goes here.



 Some text goes here.


 Some text goes here.
 


 Some text goes here.