実現したいこと
clip-pathでできた三角形にボックスシャドウをつけたいです
発生している問題・分からないこと
clip-pathで三角形を作成しました。
そこにボックスシャドウをつけたいのですが
.feature::before{/* 三角 */に
box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}
の記述をしてもボックスシャドウがつきません
該当のソースコード
html
1 <section class="solution">2 <div class="container">3 <h2>テキスト</h2>4 </div>5 </section>6 <section class="feature" id="feature">7 <div class="container">8 <h2>テキスト</h2>9 <div class="feature_inner">10 <h3>テキスト</h3>11 </div>12 <div class="feature_inner">13 <h3>テキスト</h3>14 </div>15 <div class="feature_inner">16 <h3>テキスト</h3>17 </div>18 </div>19 </section>
css
1.solution{2position: relative;3background: #94c9d0;4}5.feature{6 padding: 200px;7 position: relative;8}9.feature::before{/* 三角 */10 content: "";11 position: absolute;12 height: 60px;13 width: 100%;14 clip-path: polygon(50% 100%, 100% 0%, 0% 0%); /* ココ */15 background-color: #94c9d0;16 left: 0;17 top: 0; /* topにピッタリくっつけたいので0にする */18 box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);19}
試したこと・調べたこと
上記の詳細・結果
数値を上げていくと若干線がでてくるのですがどこの記述を直せばいいのかがわかりません
補足
特になし
0 コメント