शुद्ध सीएसएस

में एक निश्चित ट्रैपेज़ॉयडल आकार बनाएं मान लीजिए कि मेरे पास दो div हैं, जैसा कि नीचे दिखाया गया है (खूबसूरती से)। मैंने पहले ही The Shapes of CSS देखा है, लेकिन मुझे पता नहीं चला है कि नीचे चित्र में पीले रंग का आकार कैसा बनाया जा सकता है। क्या ऊपर दिए गए लिंक में वर्णित चीजों को पीले आकार को समान तरीके से बनाना संभव है।शुद्ध सीएसएस

या यहां तक कि, अब हम इस विषय पर कर रहे हैं, नीचे चित्र आदर्श स्थिति का वर्णन होगा। क्या यह सीएसएस में संभव है, या कुछ अन्य उपकरणों का उपयोग कर रहा है? (ध्यान दें कि चित्र में घटता आदर्श नहीं हैं, लेकिन शायद ऊंचाई बदलती के साथ एक मानक बेज़ियर वक्र काम करेगा?)

स्रोत

2016-10-16 konewka

सवाल आप तो एसवीजी क्लिप पथ बना सकते हैं संदर्भ के दूसरे भाग के लिए सीएसएस में आईडी। आप एचटीएमएल के नीचे एसवीजी देख सकते हैं।

-webkit-clip-path: url(#top-path); 
clip-path: url(#top-path);

दोनों तरीकों के बारे में अधिक जानकारी के होते हैं: https://css-tricks.com/clipping-masking-css/

लेकिन clip-path के लिए जागरूक समर्थन काफी समय सीमित है हो सकता है।

http://caniuse.com/#search=clip-path

div { 
 
    float: left; 
 
    height: 100px; 
 
    width: 130px; 
 
} 
 
.holder { 
 
    position: relative; 
 
} 
 
.top { 
 
    width: 490px; 
 
} 
 
.bottom { 
 
    width: 490px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 35px; 
 
} 
 
.top-left { 
 
    background-color: aquamarine; 
 
    height: 35px; 
 
} 
 
.top-mid { 
 
    background-color: aquamarine; 
 
    width: 97px; 
 
    -webkit-clip-path: url(#top-path); 
 
    clip-path: url(#top-path); 
 
} 
 
.top-right { 
 
    background-color: aquamarine; 
 
    margin-top: 37px; 
 
    height: 53px; 
 
} 
 
.bottom-left { 
 
    background-color: aqua; 
 
    height: 34px; 
 
} 
 
.bottom-mid { 
 
    background-color: aqua; 
 
    width: 97px; 
 
    -webkit-clip-path: url(#bottom-path); 
 
    clip-path: url(#bottom-path); 
 
} 
 
.bottom-right { 
 
    background-color: aqua; 
 
    margin-top: 55px; 
 
    height: 45px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>SVG Clip Path Shape</title> 
 
</head> 
 

 
<body> 
 
    <div class="holder"> 
 
    <div class="top"> 
 
     <div class="top-left"></div> 
 
     <div class="top-mid"></div> 
 
     <div class="top-right"></div> 
 
    </div> 
 
    <div class="bottom"> 
 
     <div class="bottom-left"></div> 
 
     <div class="bottom-mid"></div> 
 
     <div class="bottom-right"></div> 
 
    </div> 
 

 
    <svg width="0" height="0"> 
 
     <defs> 
 
     <clipPath id="bottom-path"> 
 
      <path d="M14.966,0.68L0,0v33.113l14.966,0.68c29.252,2.041,55.102,70.509,76.068,70.503l6.245-0.32V54.864 
 
\t l-6.245,0.32C70.068,55.189,44.218,2.721,14.966,0.68z" /> 
 
     </clipPath> 
 
     </defs> 
 
    </svg> 
 

 
    <svg width="0" height="0"> 
 
     <defs> 
 
     <clipPath id="top-path"> 
 
      <path fill="#E30613" d="M88.763,36.612C59.511,33.053,45.639,0,13.327,0C9.346,0,0,0,0,0v33.113v1.622l14.966,0.68 
 
\t c29.252,2.041,55.102,54.509,76.068,54.503l6.245-0.32V69.847V36.735L88.763,36.612z" /> 
 
     </clipPath> 
 
     </defs> 
 
    </svg> 
 
    </div> 
 
</body> 
 

 
</html>

सवाल हम clip-path उपयोग कर सकते हैं कोने में से प्रत्येक के हिस्से के एक के लिए निर्देशांक अल्पविराम से अलग किया जाता है।

-webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%); 
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);

div { 
 
    float: left; 
 
    height: 100px; 
 
    width: 130px; 
 
} 
 
.holder { 
 
    position: relative; 
 
} 
 
.top { 
 
    width: 490px; 
 
} 
 
.bottom { 
 
    width: 490px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 43px; 
 
} 
 
.top-left { 
 
    background-color: aquamarine; 
 
    height: 43px; 
 
} 
 
.top-mid { 
 
    background-color: aquamarine; 
 
    -webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%); 
 
    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%); 
 
} 
 
.top-right { 
 
    background-color: aquamarine; 
 
    margin-top: 20px; 
 
    height: 80px; 
 
} 
 
.bottom-left { 
 
    background-color: aqua; 
 
    height: 43px; 
 
} 
 
.bottom-mid { 
 
    background-color: aqua; 
 
    -webkit-clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%); 
 
    clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%); 
 
} 
 
.bottom-right { 
 
    background-color: aqua; 
 
    margin-top: 43px; 
 
    height: 57px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>CSS Shape</title> 
 
</head> 
 

 
<body> 
 
    <div class="holder"> 
 
    <div class="top"> 
 
     <div class="top-left"></div> 
 
     <div class="top-mid"></div> 
 
     <div class="top-right"></div> 
 
    </div> 
 
    <div class="bottom"> 
 
     <div class="bottom-left"></div> 
 
     <div class="bottom-mid"></div> 
 
     <div class="bottom-right"></div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

स्रोत

2016-10-16 09:54:53 Sarcoma

अब दो ओर से काम करते हुए, मैं एक अलग रणनीति की आवश्यकता हो सकती। – Sarcoma

यहाँ शुद्ध सीएसएस में पहली आकृति है। आपको perspective का उपयोग करने की आवश्यकता है।

.shape { 
 
    display: flex; 
 
    margin: 50px; 
 
} 
 
.red, 
 
.green { 
 
    color: white; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
} 
 
.green { 
 
    background: green; 
 
    position: relative; 
 
    z-index: 2; 
 
    width: 200px; 
 
    height: 127px; 
 
    margin-top: 45px; 
 
    margin-left: -22px; 
 
} 
 
.red { 
 
    width: 100px; 
 
    background: red; 
 
    height: 56px; 
 
    z-index: 2; 
 
} 
 
.parent { 
 
    position: relative; 
 
    -webkit-perspective: 711px; 
 
    perspective: 711px; 
 
    margin-left: -30px; 
 
    margin-top: 19px; 
 
} 
 
.el { 
 
    width: 200px; 
 
    -webkit-transform: rotateX(-27deg) rotateY(-40deg); 
 
    transform: rotateX(-27deg) rotateY(-40deg); 
 
    height: 65px; 
 
    background: #FFF200; 
 
    position: relative; 
 
    perspective: 350px; 
 
    -webkit-perspective: 350px; 
 
} 
 
.el:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 100%; 
 
    border-style: solid; 
 
    border-width: 0 200px 70px 0; 
 
    border-color: transparent #FFF200 transparent transparent; 
 
}

<div class="shape"> 
 
    <div class="red">Div 1</div> 
 
    <div class="parent"> 
 
    <div class="el"></div> 
 
    </div> 
 
    <div class="green">Div 2</div> 
 
</div>

स्रोत

2016-10-16 09:56:57

शुद्ध सीएसएस

उत्तर

संबंधित मुद्दे