Menu
This is basically what i want to achieve --> https://jsfiddle.net/tak1pyt7/1/
.clip {
width: 500px;
height: 500px;
-webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
height: 100%;
width: 100%;
}<body>
<div class="clip">
<img src="http://lorempixel.com/600/600/" width="100%" height="100%" />
</div>
</body>Although i have a solution but there are various issues with the code in the fiddle as follows :
Other than above solution i searched a whole lot of solutions that might help me create div's with corners cut and the cut is transparent itself because i don't have a solid background at the back.
Other solutions explored
Using CSS3 Gradients sample
Using CSS Borders
Sample --> http://jsfiddle.net/spdawson/HhZQe/light/
Doesn't work for me because The container on which the cut has to be made has to contain solid background color which is not the case for my design.
Using jQuery plugin (http://jquery.malsup.com/corner/)
Sample code --> http://jsfiddle.net/spdawson/nxnCD/light/
You need to have solid background color which isn't the case considering my requirement. I have a image as a background instead.
A Solution that WORKS but is very HACKY
Sample --> http://jsfiddle.net/26v7pfLb/
I am using this solution right now for containers that have fixed height and width but i have a page in my app where the containers have a static width but dynamic height. In that case the hack would be pretty difficult to implement and it seems very weird to use this solution personally.
I am trying to find something more elegant and clean to implement such a kind of solution in CSS
Any pointers would be helpful.
943
You can use the approach I described in this question : Cut Corners using CSS using a rotate container with overflow:hidden;
For your example (as you want to display an image inside the element) you need to "unrotate" the content like this :
.clip {
margin: -150px 0 0 -150px;
display: inline-block;
transform: rotate(-45deg);
overflow: hidden;
}
img {
margin: 150px 150px 0 150px;
display: block;
transform: rotate(45deg);
}
body{background:url(http://lorempixel.com/output/nature-q-g-640-480-7.jpg);background-size:cover;}<div class="clip">
<img src="http://lorempixel.com/600/600/" />
</div>This solution also requires positioning either with margins or with absolute positioning.
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
