जैसा कि आपने अनुमान लगाया होगा कि यह छवि एक मेल लिफाफा आकार का हिस्सा है जिसे मैं संभवतः CSS3 के साथ बनाना चाहता हूं। मैंने दूसरे हिस्सों को बनाया है लेकिन यह एक मुश्किल है। आकार दोनों तरफ और गोलाकार कोनों (संभवतः सीमा-त्रिज्या-नीचे-बाएं/सीमा-त्रिज्या-नीचे-दाएं) पर त्रिकोणीय कट दोनों की आवश्यकता होती है। यह भी में एक छोटी छाया डालने की क्षमता होनी चाहिए।CSS3 लिफाफा आकार

#envelope { 
background: #fff; 
} 

.closed { 
width: 860px; 
height: 0; 
border-top: 80px solid fff; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
-moz-box-shadow: 0 1px 5px #ccc; 
-webkit-box-shadow: 0 1px 5px #ccc; 
box-shadow: 0 1px 5px #ccc; 
}

jsFiddle - -

यह मैं अब तक क्या किया है है http://jsfiddle.net/hsYUy/

स्रोत

2011-11-10 Staffan Estberg

पृष्ठभूमि के रूप में उस आकार के साथ एक नियमित div के बारे में कैसे? – xbonez

वह मुझे लगता है कि सीएसएस में यह सब करना चाहता है। –

xbonez: सुनिश्चित नहीं है कि आपका क्या मतलब है। मैं बस छवियों के बिना इसे करना चाहता हूं, किसी भी एचटीएमएल तत्व/सीएसएस स्टाइल स्वीकार्य है। –

मेरे प्रयास, मैं सिर्फ छाया इस्तेमाल किया और क्रोम के लिए गुण घुमाने के लिए, लेकिन आप अन्य ब्राउज़र के लिए जोड़ सकते हैं

http://jsfiddle.net/hsYUy/7/

body { 
 
    background: #f2f2f2; 
 
} 
 
#content { 
 
    width: 460px; 
 
    margin: 0 auto; 
 
    background: #fff; 
 
    height: 400px; 
 
    /* for demo */ 
 
    -moz-box-shadow: 0 1px 5px #ccc; 
 
    -webkit-box-shadow: 0 1px 5px #ccc; 
 
    box-shadow: 0 1px 5px #ccc; 
 
    border-bottom-left-radius: 15px; 
 
    -moz-border-radius-bottomleft: 15px; 
 
    -webkit-border-bottom-left-radius: 15px; 
 
    border-bottom-right-radius: 15px; 
 
    -moz-border-radius-bottomright: 15px; 
 
    -webkit-border-bottom-right-radius: 15px; 
 
    z-index: 0; 
 
} 
 
.closed { 
 
    z-index: 1; 
 
    width: 460px; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    height: 80px; 
 
    margin-bottom: -5px; 
 
} 
 
.closed .mid { 
 
    /*background: #fff;*/ 
 
    width: 360px; 
 
    margin: 0 auto; 
 
    margin-top: -70px; 
 
    height: 80px; 
 
    background-color: #fff; 
 
    -moz-box-shadow: 0 1px 5px #ccc; 
 
    -webkit-box-shadow: 0 1px 5px #ccc; 
 
    box-shadow: 0 1px 5px #ccc; 
 
    -webkit-border-radius: 12px; 
 
} 
 
.left, 
 
.right { 
 
    display: none; 
 
} 
 
.closed .right { 
 
    display: block; 
 
    width: 0; 
 
    height: 100px; 
 
    border-left: 60px solid #fff; 
 
    border-right: 1px solid #ccc; 
 
    margin-left: 384px; 
 
    -webkit-transform: rotate(39deg); 
 
    margin-top: -34px; 
 
    box-shadow: 1px -1px 1px #ccc; 
 
} 
 
.closed .left { 
 
    display: block; 
 
    width: 0; 
 
    height: 100px; 
 
    border-right: 60px solid #fff; 
 
    border-left: 1px solid #ccc; 
 
    margin-left: 16px; 
 
    -webkit-transform: rotate(-39deg); 
 
    margin-top: -100px; 
 
    box-shadow: -1px -1px 1px #ccc; 
 
}

<div id="content"> 
 
    <div class="closed"> 
 
    <div class="right"></div> 
 
    <div class="left"></div> 
 
    <div class="mid"></div> 
 
    </div> 
 
</div>

स्रोत

2011-11-10 17:33:54 Andrew

बहुत बढ़िया! धन्यवाद! तो मुझे लगता है कि घूमना इसके लिए कुंजी है? –

को :: पहले और :: के बाद उपयोग करके सरल किया जा सकता है। – chovy

हालांकि यह सवाल का जवाब देता है, [यह बेहतर होगा] (http://meta.stackexchange.com/q/8259) यहां उत्तर के आवश्यक हिस्सों को शामिल करने के लिए, और संदर्भ के लिए लिंक प्रदान करें। –

यहाँ मेरी कोशिश है, बस एक div साथ

div { 
 
    margin:20px; 
 
    width:500px; 
 
    height:60px; 
 
    border-bottom-left-radius: 90px 200px; 
 
    border-bottom-right-radius: 90px 200px; 
 
    box-shadow: 0 5px 3px -5px #888, 
 
    5px 0 3px -5px #888, 
 
    -5px 0 3px -5px #888;  
 
}

<div></div>

http://jsfiddle.net/Simo990/Z8cPc/4

स्रोत

2011-11-10 17:14:51 Simone

धन्यवाद! लेकिन मैं वास्तव में इसे छवि बनाने के तरीके को देखना चाहता हूं ... –

यहाँ 3 अनुमानों है http://jsfiddle.net/JKirchartz/RNChA/ का उपयोग कर केवल सीमा-त्रिज्या, उचित उपसर्गों के साथ सभी ब्राउज़रों में काम करना चाहिए।

HTML:

.env { 
 
    width: 100%; 
 
    height: 300px; 
 
    border: 3px solid #bbb; 
 
    margin: 1em 
 
} 
 
.env_top { 
 
    border: 0.2em solid #bbb; 
 
    border-top: 0; 
 
    height: 60px; 
 
    max-width: 100%; 
 
} 
 
.one { 
 
    -webkit-border-radius: 0px 0px 24px 24px/0px 0px 200px 200px; 
 
    -moz-border-radius: 0px 0px 24px 24px/0px 0px 200px 200px; 
 
    border-radius: 0px 0px 24px 24px/0px 0px 200px 200px; 
 
} 
 
.two { 
 
    -webkit-border-radius: 0px 0px 24px 24px/0px 0px 300px 300px; 
 
    -moz-border-radius: 0px 0px 24px 24px/0px 0px 300px 300px; 
 
    border-radius: 0px 0px 24px 24px/0px 0px 300px 300px; 
 
} 
 
.thr { 
 
    -webkit-border-radius: 0px 0px 100px 100px/0px 0px 300px 300px; 
 
    -moz-border-radius: 0px 0px 100px 100px/0px 0px 300px 300px; 
 
    border-radius: 0px 0px 100px 100px/0px 0px 300px 300px; 
 
}

<div class="env"> 
 
    <div class="env_top one"></div> 
 
</div> 
 
<div class="env"> 
 
    <div class="env_top two"></div> 
 
</div> 
 
<div class="env"> 
 
    <div class="env_top thr"></div> 
 
</div>

स्रोत

2011-11-10 18:16:43 JKirchartz

एक 1 तत्व समाधान 2 डी तिरछा का उपयोग कर छद्म तत्वों पर बदल देती है।

DEMO

परिणाम:

envelope

एचटीएमएल:

.envelope { 
 
    overflow: hidden; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 20em; 
 
    height: 10em; 
 
    border-radius: .25em; 
 
    background: lemonchiffon; 
 
} 
 
.envelope:before, 
 
.envelope:after { 
 
    position: absolute; 
 
    top: -.25em; 
 
    width: 40%; 
 
    height: 30%; 
 
    content: ''; 
 
} 
 
.envelope:before { 
 
    left: 1em; 
 
    border-radius: 0 0 0 .25em; 
 
    box-shadow: -.2em .2em .2em dimgrey; 
 
    transform: skewX(37.5deg); 
 
} 
 
.envelope:after { 
 
    right: 1em; 
 
    border-radius: 0 0 .25em 0; 
 
    transform: skewX(-37.5deg); 
 
    box-shadow: .2em .2em .2em dimgrey; 
 
}

<div class='envelope'></div>

स्रोत

2013-02-15 07:44:09 Ana

CSS3 लिफाफा आकार

उत्तर

DEMO

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