CSS3 zarf şekli

Question

Bu resim tahmin edebileceğiniz gibi, mümkünse CSS3 ile oluşturmak istediğim bir posta zarfı şeklinin parçasıdır. Diğer parçaları yaptım ama bu çok zor. Şeklin her iki tarafta ve yuvarlatılmış köşelerde (muhtemelen sınır yarıçapı-altta sol/sınır yarıçapı-altta sağ) üçgen bir kesime ihtiyacı vardır. da'un küçük bir gölge oluşturma yeteneğine sahip olması gerekir.

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

Bu

Bugüne kadar yaptığım budur http://jsfiddle.net/hsYUy/ İşte

Answer 1

girişimim, sadece gölgesini kullanılan ve krom özelliklerini döndürmek, ancak burada 3 yaklaşımlar var, diğer tarayıcılar için

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>

Answer 2

sadece bir div ile, benim deneyin bulunuyor

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

Answer 3

ekleyebilirsiniz http://jsfiddle.net/JKirchartz/RNChA/ kullanarak sadece sınır yarıçapı, tüm tarayıcılarda uygun önekler ile çalışmalıdır.

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>

Answer 4

2B bükülmeyi kullanan bir 1 element solüsyon sözde elemanları ile dönüştürür.

DEMO

Sonuç:

HTML:

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