Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
css3 slash images
/**
* css3 slash images
*/
div {
position: relative;
margin: 25px;
}
div:before {
content: "";
border-left: 350px solid white;
border-bottom: 30px solid transparent;
position: absolute;
top: 0;
left: 0;
z-index:1;
}
div:after {
content: "";
border-right: 350px solid white;
border-top: 30px solid transparent;
position: absolute;
bottom: 5px;
left: 0;
z-index: 1;
}
img {
transition: all .3s ease;
}
img:hover {
opacity: .8;
}
<div><img src="http://placedog.com/350/500" alt="DOG!"></div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment