正如你可能已经猜到，这个图像是邮件信封形状的一部分，如果可能的话我想用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

他想在CSS中做所有的事情我想。 – 2011-11-10 16:48:34

xbonez：不确定你的意思。我只想在没有图像的情况下进行，任何HTML元素/ CSS样式都是可以接受的。 –

我尝试，我只用了阴影，铬旋转属性，但你可以将其添加为其他浏览器，

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

太棒了！谢谢！所以我猜旋转是这个关键吗？可以使用:: before和:: after简化 –

。 – chovy

尽管这确实回答了这个问题，但[这将是更可取的]（http://meta.stackexchange.com/q/8259）在这里包括了答案的基本部分，并提供了供参考的链接。 –

这里是我的尝试中，只有一个格

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/使用只有border-radius，应该在所有浏览器中都有适当的前缀。

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

使用二维歪斜A 1个元件溶液转变上伪元素。

DEMO

结果：

envelope

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>

来源

2013-02-15 07:44:09 Ana

CSS3信封形状

回答

DEMO

相关问题