How do this with only CSS - html

Question

i need "cut" an image from bottom-left of the image to the middle-right (triangle).
I have tried something similar using borders with the :after and :before pseudo elements but I dont know how I can achieve this in my particular case.

Answer 1

Using a solid background?
If you are using a solid colour background, you could use a pseudo element to 'cover it up'
.wrap {
position: relative;
height: 300px;
width: 300px;
}
.img {
height: inherit;
width: inherit;
background: url(http://lorempixel.com/300/300);
position: relative;
overflow: hidden;
z-index: -2;
}
.img:before {
content: "";
position: absolute;
top: 100%;
lefT: 0;
height: 100%;
width: 200%;
transform: skewY(-22.5deg);
transform-origin: top left;
background: white;
}
.text {
position: absolute;
top: 80%;
left: 20%;
width: 60%;
background: antiquewhite;
display: inline-block;
min-height: 50%;
}
.text:before {
content: "";
position: absolute;
top: -30%;
left: 0;
width: 100%;
height: 100%;
background: inherit;
z-index: -1;
transform: skewY(-22.5deg);
}
<div class="wrap">
<div class="img"></div>
<div class="text">
Lorem whatever it is
</div>
</div>
Only need new browsers?
Why not try the clip path property (limited support, however)
div{
height:300px;
width:300px;
background:url(http://lorempixel.com/300/300);
position:relative;
overflow:hidden;
-webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%);
clip-path:polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%);
}
/*for demo only*/
html, body{
height:100%;
background: rgb(79, 79, 79);
background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
}
<div></div>
Need a transparent background and browser support?
You may be able to get away with skewing a container element and 'unskewing' the child img tag - although I must add that I cannot garentee image quality to remain
.skewMe {
position: relative;
height: 300px;
width: 300px;
transform: skewY(-22.5deg);
overflow: hidden;
}
.skewMe img {
transform: skewY(22.5deg);
transform-origin: top left;
position: absolute;
top: 0;
lefT: 0;
height: 100%;
width: 100%;
}
<div class="skewMe">
<img src="http://lorempixel.com/300/300" />
</div>