Shape with text over an image

Question

So I would like to place a triangle over an image using CSS, precisely a triangle that contains some text. Something like this:

https://sketch.io/render/sk-11fa7e2aeba09cb08372f831f84d9af2.jpeg

I'm a bit stuck, so here's what I got for now:

.image {
    background: url('../image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;

    & .text {
        position: absolute;
        background-color: #FFF;
        bottom: 0;
        right: 0;
        padding: 10px 20px;
    }
}

<div class="image">
    <span class="text">
        <p>Text here</p>
        <p>And here</p>
    </span>
</div>

How can I rotate/angle/narrow the left side of the box..?

Thanks a lot for any help!

Answer 1

You can use a pseudo element of the parent, rotate() it, and translateY() it in the bottom corner.

body {
  max-width: 320px;
}

.image {
  background: url("https://lh3.googleusercontent.com/-QPadFFLbBGA/AAAAAAAAAAI/AAAAAAAADB8/FkNCMP_vkAc/photo.jpg?sz=328");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  padding-bottom: 100%;
}
.image .text {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px 20px;
}
.image::before {
  content: '';
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transform: rotate(-45deg) translateY(75%);
}

<div class="image">
  <span class="text">
        <p>Text here</p>
        <p>And here</p>
    </span>
</div>

Answer 2

Create the triangle with linear gradient, and use padding top and left to make the triangle big enough for the text.

.image {
  width: 200px;
  height: 200px;
  background: url(http://lorempixel.com/200/200/animals/);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.text {
  position: absolute;
  background: linear-gradient(to bottom right, transparent 50%, white 51%);
  bottom: 0;
  right: 0;
  padding: 60px 0 0 60px;
  text-align: right;
  white-space: nowrap;
}

<div class="image">
  <span class="text">
        <p>Text here</p>
        <p>Something longer</p>
    </span>
</div>