Form with text above image

Question

Therefore, I would like to place a triangle above the image using CSS, exactly a triangle that contains some text. Something like that:

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

I got a little stuck, so here is what I got 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 / tilt / narrow the left side of the window.?

Thanks for the help!

Answer 1

You can use the pseudo-element of the parent element, rotate() it and translateY() 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 a triangle with a linear gradient and use padding top and left to make the triangle large 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> 

Answer 3

You can use borders in the .image ::before and ::after attributes to make the shape of a triangle in the lower right corner.

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