Kształt z tekstem nad obrazkiem

Question

Chciałbym umieścić trójkąt nad obrazem za pomocą CSS, dokładnie trójkąta zawierającego tekst. Coś takiego:

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

Jestem trochę zatrzymany, więc oto co mam teraz:

.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> 

Jak mogę obrócić/kąt/zawężenie lewej stronie pudełko..?

Wielkie dzięki za pomoc!

Answer 1

Można użyć elementu pseudo rodzica, rotate() go i translateY() ją w dolnym rogu.

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

Utwórz trójkąt z linear gradient i użyj wypełnienia top i left, aby trójkąt był wystarczająco duży dla tekstu.

.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>

Answer 3

Można użyć granice na .image „s ::before i atrybutu ::after aby kształt trójkąta na prawym dolnym rogu.

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

 
.image::before, 
 
.image::after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    border-color: transparent; 
 
    border-style: solid; 
 
} 
 

 
.image::before { 
 
    border-width: 1.5em; 
 
} 
 

 
.image::after { 
 
    border-width: 3.35em; /* makes triangle bigger */ 
 
    border-bottom-color: #fff; 
 
    border-right-color: #fff; 
 
} 
 

 
.text { 
 
    position:absolute; 
 
    bottom:0; 
 
    right:0; 
 
    z-index:1; 
 
} 
 

 
p { 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
}

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