CODEWITHSUNDEEP
htmlcss
Vince Mamba
Vince Mamba

Reputation: 187

45 Degree Angle cut on divs

I'm trying to cut out the top right corner of most of my div elements on my site. These divs are all different sizes. I'm trying to find a responsive way of doing this. I ran into this site here: http://bennettfeely.com/clippy/ which allows you to cut out a custom polygon shape.

Here is what I have so far: 

div {
	width: 280px;
	height: 280px;
	background: #1e90ff;
	-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%);
clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%);
}

/* Center the demo */
html, body { height: 100%; }
body {
   background-image: url('http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg');
	display: flex;
	justify-content: center;
	align-items: center;
}
<div></div>

My question is I'm trying to read these clippings and find out how to make the perfect 45 degree angle cut off the top right corner. As of right now this polygon was created by me freehand. And I'm trying to see what percentages I would need to use to make the perfect 45 degree angle cut from the top right.

With the solution I will be adding the cutoff to most of my divs, buttons, and images.

I found other ways of doing this on Stack Overflow using border-left and right with absolute position, but the problem is I need the div cutoff to be transparent because some of them have background images behind it.

Here is a JS Fiddle that's set up: https://jsfiddle.net/xyvz5z8m/1/

Upvotes: 1

Views: 5475

Answers (1)

DBS
DBS

Reputation: 9984

You should be able to do an exact 45 degree clip by using CSS calc, to work out the positions to clip from, instead of the percentages. e.g.

-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%);
clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%);


div {
    width: 100px;
    height: 100px;
    background: #1e90ff;
    -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%);
    clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%);
  
    /* Resizing this div just to show that this will remain at 45 degrees */
    animation: resize 5s infinite; 
}

html, body {
    height: 100%; 
}

body {
    background: #ededed;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes resize {
    0%     { width: 100px; height: 100px; }
    25%    { width: 50px; height: 100px; }
    50%    { width: 50px; height: 50px; }
    75%    { width: 150px; height: 50px; }
    100%   { width: 100px; height: 100px; }
}
<div></div>

The key part being that we use pixel sizes for the positioning of the clipped area, and calc(100% - 30px) to get an exact position from the far side of the element, though bare in mind this may have very limited browser support.

Upvotes: 6

Related Questions