ボックスの影が左右にある

Question

divの左右にボックスシャドウを追加したいのですが、ここではそのイメージを付けています。どうすればいいのか分かりません。影は左と右のポイントマークになるはずです。

Answer 1

これで、必要なものが得られたらと思っています。 box-shadowプロパティのドキュメントはHere on MDNです。

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    background-color: pink; 
 
    height: 100%; 
 
    padding: 10px; 
 
} 
 
.content { 
 
    width: 85%; 
 
    margin: 0 auto; 
 
    box-sizing: border-box; 
 
    height: calc(100% - 10px); 
 
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3), 5px 5px 5px rgba(0, 0, 0, 0.3); 
 
    background-color: white; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    Hello 
 
    </div> 
 
</div>

Answer 2

body { 
 
    background-color: red; 
 
} 
 

 
.boxWrapper { 
 
    height: 100%; 
 
    overflow: hidden; 
 
    margin: 30px auto; 
 
    width: 500px; 
 
    padding: 0 60px; 
 
} 
 

 
.box { 
 
    position: relative; 
 
    border-radius: 3px; 
 
    padding: 20px; 
 
    min-height: 300px; 
 
    background-color: #fff; 
 
} 
 

 
.box:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
    top: -20px; 
 
    transform: rotate(-8deg); 
 
    left: 20px; 
 
    background-color: transparent; 
 
    box-shadow: -40px 0 30px rgba(0, 0, 0, 0.3); 
 
} 
 

 
.box:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
    top: -20px; 
 
    transform: rotate(8deg); 
 
    right: 20px; 
 
    background-color: transparent; 
 
    box-shadow: 40px 0 20px rgba(0, 0, 0, 0.3); 
 
}

<div class="boxWrapper"> 
 
    <div class="box"> 
 
    box 
 
    </div> 
 
</div>

だから、これは間違いなく、きちんとした質問です。私は周りに遊んだし、少なくとも適切な解決策への踏み台を考え出すことができました。私は言及されているボックスシャドー法でそれをやってきましたが、:afterと:before疑似セレクタの両方にそれを加えました。

次に、これらのセレクタを両方とも8度回転させて（提供された画像を模倣する）、要素の上と要素の下の両方に不要な影が残っていることがわかりました。

これを解決するために、箱のサイズを定義するだけでなく、上端と下端にオーバーフローするものを隠すことが唯一の目的であるボックスラッパーで箱を包みました。

これはちょっとハッキリと感じるので、間違いなくそれを必要とする方法に合わせて調整する必要があります。しかし、私はこれが問題に近づく方法に関するいくつかのアイデアを提供していると思います。

私は仕事でそれを見ることができるようにCodepenを作成しました。 http://codepen.io/RyanAaronGreen/pen/Kagdad

Answer 3

使用このサンプル CSS3 drop shadow