Shape mit Text über ein Bild

Question

Also möchte ich ein Dreieck über ein Bild mit CSS, genau ein Dreieck, das etwas Text enthält platzieren. Etwas wie folgt aus:

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

Ich bin ein bisschen stecken, so ist hier, was ich jetzt habe:

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

Wie kann ich/Winkel drehen/schmal der linken Seite der Box..?

Vielen Dank für jede Hilfe!

Answer 1

Sie können ein Pseudoelement der Mutter verwenden, rotate() es und translateY() es in der unteren Ecke.

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

Erstellen Sie das Dreieck mit linear gradient, und verwenden padding top und left das Dreieck groß genug für den Text zu machen.

.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

Sie grenzt an .image ‚s ::before und ::after Attribut verwenden können die Dreieckform auf dem rechten unteren Ecke zu machen.

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