ドロップシャドウ効果

Question

私はドロップシャドウのようなカスタム効果を得ようとしています。色のみが単色ではなく、模様です。

は、例えば画像を参照してください：

私は、ドロップシャドウを持つソリッドカラーを達成したが、この結果を取得することが可能であることができますか？

Answer 1

あなたがそうしたい場合は、カンマで区切られた複数のエフェクトを指定することができます。

box-shadow

しかし、私はまた、あなたがこの効果を達成するためにCSSグラデーションを使用することができます:afterを使用して、それにbackground-image: linear-gradient()

Answer 2

https://codepen.io/dakata911/pen/VyZdpV

.box { 
    width: 200px; 
    height: 100px; 
    background: #000; 
    position: relative; 
} 

.box:after { 
    content: ''; 
    width: 200px; 
    height: 100px; 
    position: absolute; 
    left: 10px; 
    top: 10px; 
    background: red; 
    z-index: -1; 
} 

Answer 3

https://jsfiddle.net/zjymfubo/1/

<div class="stripe"></div> 

.stripe { 
    height:20px; 
    width:300px; 
    position: relative; 
    background-color: red; 
} 
.stripe:after { 
    content: ''; 
    height:20px; 
    width:300px; 
    position: absolute; 
    left: 5px; 
    top: 5px; 
    z-index:-1; 
    color: white; 
    background: repeating-linear-gradient(
    -45deg, 
    #606dbc, 
    #606dbc 5px, 
    #465298 5px, 
    #465298 10px 
); 
} 

Answer 4

の適用をお勧めします：

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

.container { 
    width: 250px; 
    height: 125px; 
    position: relative; 
    background: white; 
} 
.container::after { 
    content: ""; 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    width: 100%; 
    height: 100%; 
background: repeating-linear-gradient(
    -45deg, 
    orange, 
    orange 5px, 
    white 5px, 
    white 10px 
); 
    z-index: -1; 
} 

ここにはCodepenの例があります。

Answer 5

使用：

.shadow{ 
 
     height:50px; 
 
     width:300px; 
 
     position: relative; 
 
     background-color: #fafafa; 
 
    } 
 
    .shadow:after { 
 
     content: ''; 
 
     height:50px; 
 
     width:300px; 
 
     position: absolute; 
 
     left: 6px; 
 
     top: 6px; 
 
     z-index:-1; 
 
     color: #fff; 
 
     background: repeating-linear-gradient(
 
     -45deg, 
 
     #fff, 
 
     #fff 5px, 
 
     yellow 5px, 
 
     yellow 10px 
 
    ); 
 
    }

<div class="shadow"></div>