7

CSSを使用して、コンテンツコンテナの左端と右端をこの画像のように見せることはできますか？可能であれば、画像を使わずにこれを行う方法を模索してきました。

左右の境界線の画像

これが私が取り組んできたjsFiddleです。「トップ」クラスのCSSは適用されません。「ボトム」クラスのCSSは問題なく機能しているようです。

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);
}
4

1 に答える 1

9

::beforeと疑似要素を使用::afterして効果を実現できます。ここを参照してください。

例:(デモ）

HTML：

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

CSS：

#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:after {
    left: auto;
    right: 10px;
    transform: rotate(3deg);
}

#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%;
}
于 2013-01-14T21:04:20.403 に答える