How do this with only CSS

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>