सीएसएस बॉक्स पर एक तिरछा कोना बनाना

सीएसएस बॉक्स पर एक तिरछा कोना बनाना विभिन्न तरीकों का उपयोग करके पूरा किया जा सकता है। एक दृष्टिकोण नीचे वर्णित है:

सीमाओं का उपयोग करने की विधि

यह तकनीक एक कंटेनर के बाईं ओर एक पारदर्शी सीमा और नीचे की ओर एक तिरछी सीमा बनाने पर निर्भर करती है . निम्नलिखित कोड दर्शाता है कि इसे कैसे कार्यान्वित किया जाए:

Hello World

.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid white;
}
.main {
  width: 200px;
  height: 200px;
  background-color: red;
}

इससे 45 डिग्री के कोण पर तिरछे ऊपरी-बाएँ कोने वाला एक बॉक्स तैयार होगा।

पारदर्शिता का उपयोग करते हुए वैकल्पिक विधि

To तिरछे हिस्से के भीतर पाठ की अनुमति दें, एक अतिरिक्त पारदर्शी बॉर्डर का उपयोग किया जा सकता है। नीचे संशोधित कोड इस दृष्टिकोण को दर्शाता है:

  
It's possible to put text up here too
    but if you want it to follow the slant you have to stack
    several of these.
  
Hello hello hello hello
hello hello hello hello hello

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

यह विधि एक तिरछी सीमा बनाती है जो पाठ को उसकी लंबाई के साथ प्रदर्शित कर सकती है।