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?
This question is related to
html
css
css-shapes
Another idea using mask and CSS variables to have better control over the whole shape. It's reponsive, transparent and allow any kind of background:
.box {
--all:0px;
width:200px;
height:150px;
display:inline-block;
margin:10px;
background:red;
-webkit-mask:
linear-gradient( 45deg, transparent 0 var(--bottom-left,var(--all)) ,#fff 0) bottom left,
linear-gradient( -45deg, transparent 0 var(--bottom-right,var(--all)),#fff 0) bottom right,
linear-gradient( 135deg, transparent 0 var(--top-left,var(--all)) ,#fff 0) top left,
linear-gradient(-135deg, transparent 0 var(--top-right,var(--all)) ,#fff 0) top right;
-webkit-mask-size:50.5% 50.5%;
-webkit-mask-repeat:no-repeat;
}
body {
background:grey;
}
_x000D_
<div class="box" style="--top-left:20px"></div>
<div class="box" style="--top-right:20px;--bottom-right:50px;background:radial-gradient(red,yellow)"></div>
<div class="box" style="--all:30px;background:url(https://picsum.photos/id/104/200/200)"></div>
<div class="box" style="--all:30px;--bottom-right:0px;background:linear-gradient(red,blue)"></div>
<div class="box" style="--all:50%;width:150px;background:green"></div>
<div class="box" style="--all:12%;width:150px;background:repeating-linear-gradient(45deg,#000 0 10px,#fff 0 20px)"></div>
_x000D_
And below in case you want to consider border:
.box {
--all:0px;
--b:pink;
width:200px;
height:150px;
display:inline-block;
margin:10px;
border:5px solid var(--b);
background:
linear-gradient( 45deg, var(--b) 0 calc(var(--bottom-left,var(--all)) + 5px) ,transparent 0) bottom left /50% 50%,
linear-gradient( -45deg, var(--b) 0 calc(var(--bottom-right,var(--all)) + 5px),transparent 0) bottom right/50% 50%,
linear-gradient( 135deg, var(--b) 0 calc(var(--top-left,var(--all)) + 5px) ,transparent 0) top left /50% 50%,
linear-gradient(-135deg, var(--b) 0 calc(var(--top-right,var(--all)) + 5px) ,transparent 0) top right /50% 50%,
var(--img,red);
background-origin:border-box;
background-repeat:no-repeat;
-webkit-mask:
linear-gradient( 45deg, transparent 0 var(--bottom-left,var(--all)) ,#fff 0) bottom left,
linear-gradient( -45deg, transparent 0 var(--bottom-right,var(--all)),#fff 0) bottom right,
linear-gradient( 135deg, transparent 0 var(--top-left,var(--all)) ,#fff 0) top left,
linear-gradient(-135deg, transparent 0 var(--top-right,var(--all)) ,#fff 0) top right;
-webkit-mask-size:50.5% 50.5%;
-webkit-mask-repeat:no-repeat;
}
body {
background:grey;
}
_x000D_
<div class="box" style="--top-left:20px"></div>
<div class="box" style="--top-right:20px;--bottom-right:50px;--img:radial-gradient(red,yellow);--b:white;"></div>
<div class="box" style="--all:30px;--img:url(https://picsum.photos/id/104/200/200) center/cover;--b:orange;"></div>
<div class="box" style="--all:30px;--bottom-right:0px;--img:linear-gradient(red,blue)"></div>
<div class="box" style="--all:50%;width:150px;--img:green;--b:red;"></div>
<div class="box" style="--all:12%;width:150px;--img:repeating-linear-gradient(45deg,#000 0 10px,#fff 0 20px)"></div>
_x000D_
Let's also add some radius:
.box {
--all:0px;
--b:pink;
width:200px;
height:150px;
display:inline-block;
margin:10px;
filter:url(#round);
}
.box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--img,red);
-webkit-mask:
linear-gradient( 45deg, transparent 0 var(--bottom-left,var(--all)) ,#fff 0) bottom left,
linear-gradient( -45deg, transparent 0 var(--bottom-right,var(--all)),#fff 0) bottom right,
linear-gradient( 135deg, transparent 0 var(--top-left,var(--all)) ,#fff 0) top left,
linear-gradient(-135deg, transparent 0 var(--top-right,var(--all)) ,#fff 0) top right;
-webkit-mask-size:50.5% 50.5%;
-webkit-mask-repeat:no-repeat;
}
body {
background:grey;
}
_x000D_
<div class="box" style="--top-left:20px"></div>
<div class="box" style="--top-right:20px;--bottom-right:50px;--img:radial-gradient(red,yellow);--b:white;"></div>
<div class="box" style="--all:30px;--img:url(https://picsum.photos/id/104/200/200) center/cover;--b:orange;"></div>
<div class="box" style="--all:30px;--bottom-right:0px;--img:linear-gradient(red,blue)"></div>
<div class="box" style="--all:50%;width:150px;--img:green;--b:red;"></div>
<div class="box" style="--all:12%;width:150px;--img:repeating-linear-gradient(45deg,#000 0 10px,#fff 0 20px)"></div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="round">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
_x000D_
Here is another approach using CSS transform: skew(45deg)
to produce the cut corner effect. The shape itself involves three elements (1 real and 2 pseudo-elements) as follows:
div
element has overflow: hidden
and produces the left border.:before
pseudo-element which is 20% the height of the parent container and has a skew transform applied to it. This element prodcues the border on the top and cut (slanted) border on the right side.:after
pseudo-element which is 80% the height of the parent (basically, remaining height) and produces the bottom border, the remaining portion of the right border.The output produced is responsive, produces a transparent cut at the top and supports transparent backgrounds.
div {_x000D_
position: relative;_x000D_
height: 100px;_x000D_
width: 200px;_x000D_
border-left: 2px solid beige;_x000D_
overflow: hidden;_x000D_
}_x000D_
div:after,_x000D_
div:before {_x000D_
position: absolute;_x000D_
content: '';_x000D_
width: calc(100% - 2px);_x000D_
left: 0px;_x000D_
z-index: -1;_x000D_
}_x000D_
div:before {_x000D_
height: 20%;_x000D_
top: 0px;_x000D_
border: 2px solid beige;_x000D_
border-width: 2px 3px 0px 0px;_x000D_
transform: skew(45deg);_x000D_
transform-origin: right bottom;_x000D_
}_x000D_
div:after {_x000D_
height: calc(80% - 4px);_x000D_
bottom: 0px;_x000D_
border: 2px solid beige;_x000D_
border-width: 0px 2px 2px 0px;_x000D_
}_x000D_
.filled:before, .filled:after {_x000D_
background-color: beige;_x000D_
}_x000D_
_x000D_
/* Just for demo */_x000D_
_x000D_
div {_x000D_
float: left;_x000D_
color: beige;_x000D_
padding: 10px;_x000D_
transition: all 1s;_x000D_
margin: 10px;_x000D_
}_x000D_
div:hover {_x000D_
height: 200px;_x000D_
width: 300px;_x000D_
}_x000D_
div.filled{_x000D_
color: black;_x000D_
}_x000D_
body{_x000D_
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);_x000D_
}
_x000D_
<div class="cut-corner">Some content</div>_x000D_
<div class="cut-corner filled">Some content</div>
_x000D_
The below is another method to produce the cut corner effect by using linear-gradient
background images. A combination of 3 gradient images (given below) is used:
The output produced is responsive, produces transparent cut and doesn't require any extra elements (real or pseudo). The drawback is that this approach would work only when the background (fill) is a solid color and it is very difficult to produce borders (but still possible as seen in the snippet).
.cut-corner {_x000D_
height: 100px;_x000D_
width: 200px;_x000D_
background-image: linear-gradient(to bottom left, transparent 50%, beige 50%), linear-gradient(beige, beige), linear-gradient(beige, beige);_x000D_
background-size: 25px 25px, 100% 100%, 100% 100%;_x000D_
background-position: 100% 0%, -25px 0%, 100% 25px;_x000D_
background-repeat: no-repeat;_x000D_
}_x000D_
.filled {_x000D_
background-image: linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(to bottom left, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), beige calc(50% + 1px)), linear-gradient(beige, beige), linear-gradient(beige, beige);_x000D_
background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;_x000D_
background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;_x000D_
}_x000D_
_x000D_
/* Just for demo */_x000D_
_x000D_
*{_x000D_
box-sizing: border-box;_x000D_
}_x000D_
div {_x000D_
float: left;_x000D_
color: black;_x000D_
padding: 10px;_x000D_
transition: all 1s;_x000D_
margin: 10px;_x000D_
}_x000D_
div:hover {_x000D_
height: 200px;_x000D_
width: 300px;_x000D_
}_x000D_
body{_x000D_
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);_x000D_
}
_x000D_
<div class="cut-corner">Some content</div>_x000D_
<div class="cut-corner filled">Some content</div>
_x000D_
You could use linear-gradient
. Let's say the parent div
had a background image, and you needed a div
to sit on top of that with a gray background and a dog-eared left corner. You could do something like this:
.parent-div { background: url('/image.jpg'); }
.child-div {
background: #333;
background: linear-gradient(135deg, transparent 30px, #333 0);
}
Further reading:
You can use clip-path
, as Stewartside and Sviatoslav Oleksiv mentioned. To make things easy, I created a sass mixin:
@mixin cut-corners ($left-top, $right-top: 0px, $right-bottom: 0px, $left-bottom: 0px) {
clip-path: polygon($left-top 0%, calc(100% - #{$right-top}) 0%, 100% $right-top, 100% calc(100% - #{$right-bottom}), calc(100% - #{$right-bottom}) 100%, $left-bottom 100%, 0% calc(100% - #{$left-bottom}), 0% $left-top);
}
.cut-corners {
@include cut-corners(10px, 0, 25px, 50px);
}
I recently cut off the top right corner and overlaid the tabs like folders. Complete code noob, so ignore the shitty code, but I did this by combining a square, a triangle, and a rectangle... This may or may not be a new approach, but hopefully, someone finds it helpful.
https://i.stack.imgur.com/qFMRz.png
Here is the HTML:
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="folders">
<div class="container">
<div class="triangleOne">
<p class="folderNames">Home</p>
</div>
<div class="triangleOneCut">
</div>
<div class="triangleOneFill">
</div>
</div>
<div class="container2">
<div class="triangleOne blue">
<p class="folderNames">About</p>
</div>
<div class="triangleOneCut blueCut">
</div>
<div class="triangleOneFill blue">
</div>
</div>
<div class="container3">
<div class="triangleOne green">
<p class="folderNames">Contact</p>
</div>
<div class="triangleOneCut greenCut">
</div>
<div class="triangleOneFill green">
</div>
</div>
</div>
</body>
</html>
Here is the CSS:
.triangleOne {
height: 50px;
width: 40px;
background: red;
border-radius: 5px 0px 0px 5px;
position: absolute;
}
.triangleOneCut {
content: '';
position: absolute;
top: 0; left: 40px;
border-top: 10px solid transparent;
border-left: 10px solid red;
width: 0;
}
.triangleOneFill {
content: '';
position: absolute;
top: 10px; left: 40px;
width: 10px;
height: 40px;
background-color: red;
border-radius: 0px 0px 5px 0px;
}
.container {
position: relative;
height: 50px;
width: 50px;
display: inline-block;
z-index: 3;
}
.container2 {
position: relative;
height: 50px;
width: 50px;
display: inline-block;
left: -10px;
z-index: 2;
}
.container3 {
position: relative;
height: 50px;
width: 50px;
display: inline-block;
left: -20px;
z-index: 1;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.blueCut {
border-left: 10px solid blue;
}
.greenCut {
border-left: 10px solid green;
}
.folders {
width: 160px;
height: 50px;
/* border: 10px solid white; */
margin: auto;
padding-left: 25px;
margin-top: 100px;
}
.folderNames {
text-align: right;
padding-left: 2px;
color: white;
margin-top: 1.5px;
font-family: monospace;
font-size: 6.5px;
border-bottom: double 1.5px white;
}
This code allows you to cut corners on each side of the rectangle:
div {
display:block;
height: 300px;
width: 200px;
background: url('http://lorempixel.com/180/290/') no-repeat;
background-size:cover;
-webkit-clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}
According to Harry's linear-gradient solution (answered Oct 14 '15 at 9:55), it says that opacity background isn't possible, I tried it and yep, it isn't.
But! I found a workaround. No it's not super optimised, but it worked. So here's my solution. Since Harry doesn't use pseudo element, we can achieve this by creating one.
Set position relative to the container and create a pseudo element with the same linear-gradient properties. In other words, just clone it. Then put a transparent background for the container, and lets say a black background for the clone. Put a position absolute on it, a z-index of -1 and an opacity value (ie. 50%). It will do the job. Again it's a workaround and it's not perfect but it works just fine.
.cut-corner {_x000D_
position: relative;_x000D_
color: white;_x000D_
background-repeat: no-repeat;_x000D_
background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);_x000D_
background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;_x000D_
background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;_x000D_
}_x000D_
.cut-corner:after {_x000D_
content: "";_x000D_
position: absolute;_x000D_
left: 0;_x000D_
bottom: 0;_x000D_
right: 0;_x000D_
top: 0;_x000D_
z-index: -1;_x000D_
opacity: 0.5;_x000D_
background-repeat: no-repeat;_x000D_
background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), black calc(50% + 1px)), linear-gradient(black, black), linear-gradient(black, black);_x000D_
background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;_x000D_
background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;_x000D_
}_x000D_
_x000D_
/* Just for demo */_x000D_
_x000D_
div {_x000D_
padding: 10px;_x000D_
}_x000D_
body{_x000D_
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);_x000D_
}
_x000D_
<div class="cut-corner">_x000D_
Some content<br>_x000D_
Some content<br>_x000D_
Some content<br>_x000D_
Some content _x000D_
</div>
_x000D_
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 {_x000D_
background: url(http://i.imgur.com/k8BtMvj.jpg);_x000D_
background-size: cover;_x000D_
}_x000D_
div {_x000D_
position: relative;_x000D_
width: 50%;_x000D_
margin: 0 auto;_x000D_
overflow: hidden;_x000D_
padding: 20px;_x000D_
text-align: center;_x000D_
}_x000D_
div:after {_x000D_
content: '';_x000D_
position: absolute;_x000D_
width: 1100%; height: 1100%;_x000D_
top: 20px; right: -500%;_x000D_
background: rgba(255,255,255,.8);_x000D_
transform-origin: 54% 0;_x000D_
transform: rotate(45deg);_x000D_
z-index: -1;_x000D_
}
_x000D_
<div>_x000D_
... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>_x000D_
</div>
_x000D_
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 {_x000D_
background: url(http://i.imgur.com/k8BtMvj.jpg);_x000D_
background-size: cover;_x000D_
}_x000D_
div {_x000D_
position: relative;_x000D_
width: 50%;_x000D_
margin: 0 auto;_x000D_
overflow: hidden;_x000D_
padding: 20px;_x000D_
text-align: center;_x000D_
}_x000D_
div:after {_x000D_
content: '';_x000D_
position: absolute;_x000D_
width: 1100%; height: 1100%;_x000D_
bottom: 20px; right: -500%;_x000D_
background: rgba(255,255,255,.8);_x000D_
transform-origin: 54% 100%;_x000D_
transform: rotate(-45deg);_x000D_
z-index: -1;_x000D_
}
_x000D_
<div>_x000D_
... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>_x000D_
</div>
_x000D_
With a small edit to Joseph's code, the element does not require a solid background:
div {
height: 300px;
background: url('http://images2.layoutsparks.com/1/190037/serene-nature-scenery-blue.jpg');
position: relative;
}
div:before {
content: '';
position: absolute;
top: 0; right: 0;
border-top: 80px solid white;
border-left: 80px solid rgba(0,0,0,0);
width: 0;
}
http://jsfiddle.net/2bZAW/1921/
This use of 'rgba(0,0,0,0)' allows the inner 'corner' to be invisible .
You can also edit the 4th parameter 'a', where 0 < a < 1, to have a shadow for more of a 'folded-corner' effect:
http://jsfiddle.net/2bZAW/1922/ (with shadow)
NOTE: RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.
Here's a solution for if you don't want a solid-color background, i.e. just a border with square-cut corners.
.container {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
position: relative;
}
.border {
position: absolute;
width: 100%;
height: 100%;
}
.border:before {
content: '';
position: absolute;
border-top: 15px solid white;
border-left: 15px solid white;
width: 0;
}
.border:after {
content: '';
position: absolute;
width: 16px;
height: 1px;
background: black;
}
.tl:before { top: -5px; left: -5px; transform: rotate(-45deg); }
.tl:after { top: 5px; left: -3px; transform: rotate(-45deg);}
.tr:before { top: -5px; right: -5px; transform: rotate(45deg); }
.tr:after { top: 5px; right: -3px; transform: rotate(45deg); }
.bl:before { bottom: -5px; left: -5px; transform: rotate(45deg); }
.bl:after { bottom: 5px; left: -3px; transform: rotate(45deg); }
.br:before { bottom: -5px; right: -5px; transform: rotate(-45deg); }
.br:after { bottom: 5px; right: -3px; transform: rotate(-45deg); }
_x000D_
<html>
<body>
<div class="container">
<div class="border tl"></div>
<div class="border tr"></div>
<div class="border bl"></div>
<div class="border br"></div>
</div>
</body>
</html>
_x000D_
If you need a diagonal border instead of a diagonal corner, you can stack 2 divs with each a pseudo element:
DEMO
http://codepen.io/remcokalf/pen/BNxLMJ
.container {_x000D_
padding: 100px 200px;_x000D_
overflow: hidden;_x000D_
}_x000D_
_x000D_
div.diagonal {_x000D_
background: #da1d00;_x000D_
color: #fff;_x000D_
font-family: Arial, Helvetica, sans-serif;_x000D_
width: 300px;_x000D_
height: 300px;_x000D_
padding: 70px;_x000D_
position: relative;_x000D_
margin: 30px;_x000D_
float: left;_x000D_
}_x000D_
_x000D_
div.diagonal2 {_x000D_
background: #da1d00;_x000D_
color: #fff;_x000D_
font-family: Arial, Helvetica, sans-serif;_x000D_
width: 300px;_x000D_
height: 300px;_x000D_
padding: 70px;_x000D_
position: relative;_x000D_
margin: 30px;_x000D_
background: #da1d00 url(http://www.remcokalf.nl/background.jpg) left top;_x000D_
background-size: cover;_x000D_
float: left;_x000D_
}_x000D_
_x000D_
div.diagonal3 {_x000D_
background: #da1d00;_x000D_
color: #da1d00;_x000D_
font-family: Arial, Helvetica, sans-serif;_x000D_
width: 432px;_x000D_
height: 432px;_x000D_
padding: 4px;_x000D_
position: relative;_x000D_
margin: 30px;_x000D_
float: left;_x000D_
}_x000D_
_x000D_
div.inside {_x000D_
background: #fff;_x000D_
color: #da1d00;_x000D_
font-family: Arial, Helvetica, sans-serif;_x000D_
width: 292px;_x000D_
height: 292px;_x000D_
padding: 70px;_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
div.diagonal:before,_x000D_
div.diagonal2:before {_x000D_
content: '';_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 0;_x000D_
border-top: 80px solid #fff;_x000D_
border-right: 80px solid transparent;_x000D_
width: 0;_x000D_
}_x000D_
_x000D_
div.diagonal3:before {_x000D_
content: '';_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 0;_x000D_
border-top: 80px solid #da1d00;_x000D_
border-right: 80px solid transparent;_x000D_
width: 0;_x000D_
z-index: 1;_x000D_
}_x000D_
_x000D_
div.inside:before {_x000D_
content: '';_x000D_
position: absolute;_x000D_
top: -4px;_x000D_
left: -4px;_x000D_
border-top: 74px solid #fff;_x000D_
border-right: 74px solid transparent;_x000D_
width: 0;_x000D_
z-index: 2;_x000D_
}_x000D_
_x000D_
h2 {_x000D_
font-size: 30px;_x000D_
line-height: 1.3em;_x000D_
margin-bottom: 1em;_x000D_
position: relative;_x000D_
z-index: 1000;_x000D_
}_x000D_
_x000D_
p {_x000D_
font-size: 16px;_x000D_
line-height: 1.6em;_x000D_
margin-bottom: 1.8em;_x000D_
}_x000D_
_x000D_
#grey {_x000D_
width: 100%;_x000D_
height: 400px;_x000D_
background: #ccc;_x000D_
position: relative;_x000D_
margin-top: 100px;_x000D_
}_x000D_
_x000D_
#grey:before {_x000D_
content: '';_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 0;_x000D_
border-top: 80px solid #fff;_x000D_
border-right: 80px solid #ccc;_x000D_
width: 400px;_x000D_
}
_x000D_
<div id="grey"></div>_x000D_
<div class="container">_x000D_
<div class="diagonal">_x000D_
<h2>Header title</h2>_x000D_
<p>Yes a CSS diagonal corner is possible</p>_x000D_
</div>_x000D_
<div class="diagonal2">_x000D_
<h2>Header title</h2>_x000D_
<p>Yes a CSS diagonal corner with background image is possible</p>_x000D_
</div>_x000D_
<div class="diagonal3">_x000D_
<div class="inside">_x000D_
<h2>Header title</h2>_x000D_
<p>Yes a CSS diagonal border is even possible with an extra div</p>_x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
We had the problem of different background colors for our cutted elements. And we only wanted upper right und bottom left corner.
body {_x000D_
background-color: rgba(0,0,0,0.3)_x000D_
_x000D_
}_x000D_
_x000D_
.box {_x000D_
position: relative;_x000D_
display: block;_x000D_
background: blue;_x000D_
text-align: center;_x000D_
color: white;_x000D_
padding: 15px;_x000D_
margin: 50px;_x000D_
}_x000D_
_x000D_
.box:before,_x000D_
.box:after {_x000D_
content: "";_x000D_
position: absolute;_x000D_
left: 0; _x000D_
right: 0;_x000D_
bottom: 100%;_x000D_
border-bottom: 15px solid blue;_x000D_
border-left: 15px solid transparent;_x000D_
border-right: 15px solid transparent;_x000D_
}_x000D_
_x000D_
.box:before{_x000D_
border-left: 15px solid blue;_x000D_
}_x000D_
_x000D_
.box:after{_x000D_
border-right: 15px solid blue;_x000D_
}_x000D_
_x000D_
.box:after {_x000D_
bottom: auto;_x000D_
top: 100%;_x000D_
border-bottom: none;_x000D_
border-top: 15px solid blue;_x000D_
}_x000D_
_x000D_
_x000D_
/* Active box */_x000D_
.box.active{_x000D_
background: white;_x000D_
color: black;_x000D_
}_x000D_
_x000D_
_x000D_
_x000D_
.active:before,_x000D_
.active:after {_x000D_
border-bottom: 15px solid white;_x000D_
}_x000D_
_x000D_
.active:before{_x000D_
border-left: 15px solid white;_x000D_
}_x000D_
_x000D_
.active:after{_x000D_
border-right: 15px solid white;_x000D_
}_x000D_
_x000D_
.active:after {_x000D_
border-bottom: none;_x000D_
border-top: 15px solid white;_x000D_
}
_x000D_
<div class="box">_x000D_
Some text goes here. Some text goes here. Some text goes here. Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>_x000D_
</div>_x000D_
<div class="box">_x000D_
Some text goes here._x000D_
</div>_x000D_
<div class="box active">_x000D_
Some text goes here._x000D_
<span class="border-bottom"></span>_x000D_
</div>_x000D_
<div class="box">_x000D_
Some text goes here._x000D_
</div>
_x000D_
Using a clip-path is a new, up and coming alternative. Its starting to get supported more and more and is now becoming well documented. Since it uses SVG to create the shape, it is responsive straight out of the box.
div {_x000D_
width: 200px;_x000D_
min-height: 200px;_x000D_
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);_x000D_
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);_x000D_
background: lightblue;_x000D_
}
_x000D_
<div>_x000D_
<p>Some Text</p>_x000D_
</div>
_x000D_
I have an alternative to web-tiki's transform answer.
body {_x000D_
background: lightgreen;_x000D_
}_x000D_
div {_x000D_
width: 200px;_x000D_
height: 200px;_x000D_
background: transparent;_x000D_
position: relative;_x000D_
overflow: hidden;_x000D_
}_x000D_
div.bg {_x000D_
width: 200%;_x000D_
height: 200%;_x000D_
background: lightblue;_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: -75%;_x000D_
transform-origin: 50% 50%;_x000D_
transform: rotate(45deg);_x000D_
z-index: -1;_x000D_
}
_x000D_
<div>_x000D_
<div class="bg"></div>_x000D_
<p>Some Text</p>_x000D_
</div>
_x000D_
Another one solution: html:
<div class="background">
<div class="container">Hello world!</div>
</div>
css:
.background {
position: relative;
width: 50px;
height: 50px;
border-right: 150px solid lightgreen;
border-bottom: 150px solid lightgreen;
border-radius: 10px;
}
.background::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 25px solid lightgreen;
border-top-color: transparent;
border-left-color: transparent;
}
.container {
position: absolute;
padding-left: 25px;
padding-top: 25px;
font-size: 38px;
font-weight: bolder;
}
by small modification of Joshep's code...You can use this code which seems like right corner folded down as per your requirement.
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 blue;
width: 0;
}
Source: Stackoverflow.com