css - この影はCSSで作成できますか？

Question

CSSで次のデュアルアングルシャドウを作成するにはどうすればよいですか？それも可能ですか？

Answer 1

次のHTMLを使用します。

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

および次のCSS：

.box {
    width:70%;
    height:200px;
    margin:40px auto;
    position: relative;
    background-color: red;
}
.box:before, .box:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.box:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}​

このライブ例を見る

Answer 2

はい： http： //matthamm.com/box-shadow-curl.html

また： http： //nicolasgallagher.com/css-drop-shadows-without-images/demo/

Answer 3

ボックスの後ろに、塗りつぶしとボックスの影を付けて2つのdivを配置できます。次に、それぞれを少し回転させます。私はおそらく画像でそれを行うでしょうが、よりきれいに見えます。

Answer 4

はい、それは可能です、beforeそしてafter疑似要素。

2つを絶対に配置し、たとえば5度（実際には1つは5で、もう1つは-5）で回転させ、それぞれにaを与えbox-shadow、影がボックス自体よりも小さく見えるようにスプレッド値を微調整します。 。そして、あなたはz-index彼らがあなたのdivの後ろに現れるように設定します。

デモへのリンクhttp://dabblet.com/gist/2789364

コードの関連部分

.box:before, .box:after {
    bottom: 0;
    min-height: 45%;
    width: 65%;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(204,204,204,.4);
    position: absolute;
    z-index: -1;
    background: rgba(204,204,204,.4);
    content: '';
}
.box:before {
    left: 5px;
    transform: rotate(-5deg);
}
.box:after {
    right: 5px;
    transform: rotate(5deg);
}