CSS kavisli degradeler ve kutu-gölge

Question

Bir içerik kabının sol ve sağ kenarlarını bu görüntüye benzetmek için CSS kullanılabilir mi? Bir resim kullanmadan bunu yapmanın bir yolunu bulmaya çalışıyorum, eğer mümkünse. İşte

Üzerinde çalıştığım edilmiştir jsFiddle olduğunu. "Üst" sınıf için CSS asla uygulanmaz. "Alt" sınıf için CSS olsa iyi çalışıyor gibi görünüyor.

http://jsfiddle.net/kXuQY/

HTML:

<div class="drop-shadow top bottom"> 
    Content here. 
</div> 

CSS:

.drop-shadow { 
/** Create container. Box-shadow here is to color the inside of the container **/ 
position:relative; 
width:50%; 
background: none repeat scroll 0 0 #FFFFFF; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
padding:3em; 
margin: 2em 20px 4em; 
text-align:center 
} 

.top:before, 
.top:after { 
    /** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/ 
content:""; 
position:absolute; 
z-index:-1; 
top:20px; 
left:0; 
width:40%; 
height:1em; 
max-width:150px; 
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
-webkit-transform:rotate(70deg); 
-moz-transform:rotate(70deg); 
-o-transform:rotate(70deg); 
transform:rotate(70deg); 
} 

.top:after{ 
    /**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/ 
right:0; 
left:auto; 
-webkit-transform:rotate(-70deg); 
-moz-transform:rotate(-70deg); 
-o-transform:rotate(-70deg); 
transform:rotate(-70deg); 
} 

.bottom:before, 
.bottom:after { 
    /** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/ 
content:""; 
position:absolute; 
z-index:-2; 
top:90px; 
left:0; 
width:10%; 
max-width:150px; 
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
-webkit-transform:rotate(99deg); 
-moz-transform:rotate(99deg); 
-o-transform:rotate(99deg); 
transform:rotate(99deg); 
} 

.bottom:after{ 
    /**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/ 
right:0; 
left:auto; 
-webkit-transform:rotate(-99deg); 
-moz-transform:rotate(-99deg); 
-o-transform:rotate(-99deg); 
transform:rotate(-99deg); 
} 

Answer 1

Bunu başarmak için önce ve sonra CSS özelliklerini kullanabilirsiniz. onay bunu: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

bir başka yolu:

HTML:

<div id="box"> 
<h1>css-3-box-shadow</h1> 
<p>some text</p> 
</div> 

CSS:

#box:after { 
    left: auto; 
    right: 10px; 
    transform: rotate(3deg); 
} 
#box:before, #box:after { 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); 
    bottom: 15px; 
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); 
    content: ""; 
    left: 10px; 
    max-width: 300px; 
    position: absolute; 
    top: 80%; 
    transform: rotate(-3deg); 
    width: 50%; 
    z-index: -1; 
} 
#box:before, #box:after { 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); 
    bottom: 15px; 
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); 
    content: ""; 
    left: 10px; 
    max-width: 300px; 
    position: absolute; 
    top: 80%; 
    transform: rotate(-3deg); 
    width: 50%; 
    z-index: -1; 
} 
#box { 
    background: none repeat scroll 0 0 #DDDDDD; 
    border-radius: 4px 4px 4px 4px; 
    color: rgba(0, 0, 0, 0.8); 
    line-height: 1.5; 
    margin: 60px auto; 
    padding: 2em 1.5em; 
    position: relative; 
    text-shadow: 0 1px 0 #FFFFFF; 
    width: 60%; 
} 

Ref: http://www.red-team-design.com/wp-content/uploads/2011/04/css3-box-shadow.html

Yardım eder.