CSS3エンベロープ形状

Question

は、私は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/

Answer 1

私の試み、私は影のみを使用し、クロムのプロパティを回転させていますが、他のブラウザのためにそれを追加することができ、

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

ここに私の試みは、ちょうど1の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で、です

Answer 3

ここ3つの近似値だhttp://jsfiddle.net/JKirchartz/RNChA/使用しますborder-radiusだけが、適切なプレフィックスを持つすべてのブラウザで動作するはずです。

HTML：2Dスキューを用い

.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

1つの元素溶液は、擬似要素に変換します。

DEMO

結果：

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>