सीएसएस के साथ divs कैसे स्कू करें

मेरे पास div है और मैं सोच रहा हूं कि मैं नीचे और दाहिने तरफ थोड़ा कोण कैसे लगा सकता हूं।

मैं त्रिकोण बना सकता हूं, और सभी तरफ झुका सकता हूं, बस यह सुनिश्चित नहीं कर सकता कि दो तरफ कैसे स्कीव करें।

क्या यह संभव है? धन्यवाद।

0
आपको हमें कुछ कोड दिखाने की ज़रूरत है जो आपने कोशिश की है।
जोड़ा लेखक Ally, स्रोत

2 उत्तर

आप : पहले और : CSS चयनकर्ताओं के बाद इसका उपयोग कर सकते हैं। मैंने बस एक मोटा उदाहरण चाबुक किया।

JSFiddle

HTML:

<div class="slanted"></div>

सीएसएस:

.slanted {
    position: relative;
    height: 200px;
    width: 380px;
    min-width: 380px;
    max-width: 380px;
    background: #000;
}

.slanted:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-right: 180px solid #000;
    border-top: 100px solid #000;
    border-bottom: 100px solid #fff; /* page background color */
}

.slanted:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-left: 200px solid #000;
    border-bottom: 200px solid #fff; /* page background color */
}
3
जोड़ा

नए ब्राउज़र में, आप सीएसएस ट्रांसफॉर्म का उपयोग कर सकते हैं।

यह कोड एक div skew होगा:

-webkit-transform: matrix(1, 0, 0.6, 1, 250, 0);
-o-transform: matrix(1, 0, 0.6, 1, 250, 0);
transform: matrix(1, 0, 0.6, 1, 250, 0);

The result will look something like this: enter image description here

JSFiddle

मोज़िला डेवलपर नेटवर्क में एक लेख है जो इसके बारे में और बताता है विभिन्न परिवर्तन जो आप आवेदन कर सकते हैं। इसमें कई उदाहरण भी हैं और इसमें ब्राउज़र संगतता के बारे में विवरण

0
जोड़ा