छवि पर पाठ के साथ आकार

Question

तो मैं सीएसएस का उपयोग कर एक छवि पर एक त्रिकोण रखना चाहता हूं, ठीक उसी त्रिकोण जिसमें कुछ पाठ होता है। कुछ इस तरह:

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

मैं थोड़ा अटक हूँ, इसलिए यहाँ क्या मैं अब के लिए मिल गया है:

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

मैं कैसे घुमा सकते हैं/कोण/के बाईं ओर संकीर्ण डिब्बा..?

किसी भी मदद के लिए बहुत बहुत धन्यवाद!

Answer 1

आप नीचे कोने में माता पिता की एक छद्म तत्व, rotate() यह, और translateY() इसका इस्तेमाल कर सकते हैं।

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

linear gradient के साथ त्रिकोण बनाएं, और पाठ के लिए त्रिकोण को काफी बड़ा बनाने के लिए पैडिंग top और left का उपयोग करें।

.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

आप अपने निचले दाएं कोने पर त्रिकोण आकार बनाने के लिए पर .image के ::before और ::after विशेषता सीमाओं का उपयोग कर सकते हैं।

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