Clipped Corner Div with a Separate Linear Gradient

Instead of falling back on SVG, I'd love to accomplish this with pure CSS.

There are a number of tutorials on clipped edges using a series of Linear Gradients, i.e.

background: linear-gradient(135deg, transparent 15px, blue 0) top left,
linear-gradient(-135deg, transparent 15px, blue 0) top right,
linear-gradient(-45deg, transparent 15px, blue 0) bottom right,
linear-gradient(45deg, transparent 15px, blue0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;


And a diagonal "linear gradient" can also be accomplished quite easily, i.e.

background: linear-gradient(290deg, blue 50%, darkblue 50%);


Is there a way to combine these two techniques to get something like the box pictured below?

Edit: Internet Explorer compatibility would be great.

-webkit-clip-path
clip-path


Are not IE compatible to my knowledge.

2 Answers
2

You can define one transparent corner via background gradient. However, when you declare more than one, they paint over the transparency defined by the previous rule. In essence, they paint over each other.

A better solution is to use clip-path. For simple shapes, you can use clippy.

clip-path

body
background: black;


#gradients
width: 200px;
height: 50px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) top left, linear-gradient(-135deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) top right, linear-gradient(-45deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) bottom right, linear-gradient(45deg, rgba(255, 255, 255, 0) 15px, blue) bottom left;


#gradientsPaintover
margin: 30px 0 0 0;
width: 200px;
height: 50px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0) 15px, rgba(0, 255, 0, 0.4) 0) top left, linear-gradient(-135deg, rgba(255, 255, 255, 0) 15px, rgba(0, 0, 255, 1) 0) top right;



#clip
background: red;
margin: 30px 0 0 0;
width: 200px;
height: 50px;
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);


<div id="gradients"></div>
<div id="gradientsPaintover"></div>
<div id="clip"></div>

Serg's answer was helpful in solving the problem, but I thought'd I'd post a complete solution.

background: linear-gradient(290deg, blue 50%, darkblue 50%);
-webkit-clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0 10%);
clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0 10%);


A note that this will not work at all in IE and you should pursue the SVG option in that case.

Edit: spending some more time with this, there's no reason you couldn't create pseudo elements before and after your div that contains a linear-gradient to add the 'cut edge' look.

div

linear-gradient

See codepen here or CSS below.

/*div and interior BG*/
div
width: 80%;
height: 300px; /*Make sure your content has a height specified*/
display: inline-block;
background: linear-gradient(290deg, blue 50%, darkblue 50%);
position: relative;
margin-left: 10%;


/*Shared styles across pseudo elements*/
div:before, div:after
content: '';
width: 20%;
min-height: 300px; /*Fits psuedo element height to content*/
position: absolute;
display:inline-block;

/*Position and cuts for left side*/
div:before
left: -9.9%;
background: linear-gradient(135deg, transparent 15px, darkblue 0) top left,
linear-gradient(45deg, transparent 15px, darkblue 0) bottom left;
background-size: 100% 51%;
background-repeat: no-repeat;

/*Position and cuts for left right*/
div:after
right: -9.9%;
background:
linear-gradient(-135deg, transparent 15px, blue 0) top right,
linear-gradient(-45deg, transparent 15px, blue 0) bottom right;
background-size: 100% 51%;
background-repeat: no-repeat;



Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy