斜め角のボックスシャドー

Question

私はボックスシャドーを置かなければならない斜めの右下隅を持つ要素を持っています。時には、傾斜角は、バッジによって隠蔽されて - 私の問題は適用されません、その場合は：

これはインフォボックスとそのコーナー用（S）CSSの一部である（一部がありますより多くのスタイルが、彼らは単なるテキスト修飾子だ...全部はcodepenである：https://codepen.io/kerowan/pen/bqMOeBこれがあれば、それは、行うことができます（傾斜角に沿って影を動かす）行うことができますどのように

.product-info-wrapper { 
    position: absolute; 
    top: 150px; 
    max-width: 100%; 
    padding-bottom: 10px; 
    width: 100%; 
    .product-info { 
    position: relative; 
    padding: 1rem * .5; 
    padding-right: 1rem * 2; 
    overflow: hidden; 
    box-shadow: 0 0 5px; 
    &:before, 
    &:after { 
     position: absolute; 
     content: ""; 
     left: 0; 
     z-index: -1; 
     background-color: lighten(#000, 93.5%); 
     border-color: lighten(#000, 93.5%); 
    } 
    &:before { 
     top: 0; 
     right: 0; 
     bottom: 35px; 
    } 
    &:after { 
     top: auto; 
     right: -5px; 
     bottom: 0; 
     border-style: solid; 
     border-width: 35px 35px 0 0; 
     background-color: transparent; 
     border-right-color: transparent; 
    } 
    } 
} 

？斜めのコーナーが私のやり方で生成されていますか？私はそのクラスに依存しています（私は少なくともrelativeとabsoluteの位置合わせには、コーナーバッジを配置する必要がありました。

EDIT：一部のHTML、あなたがそれを必要とする場合：

 <div class="swiper-slide"> 
     <div class="product-info-wrapper"> 
      <div class="product-info"> 
      <div class="row no-gutters"> 
       <div class="col-8"> 
       <strong class="text-uppercase">Amino Force</strong> 
       <span class="product-info-link"><a href="#">Kurzinfo</a></span> 
       </div> 
       <div class="col-4 text-right"> 
       <span class="product-info-price">CHF 34.00</span> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 

     <div class="swiper-slide"> 
     <div class="product-info-wrapper"> 
      <div class="product-info"> 
      <div class="row no-gutters"> 
       <div class="col-8"> 
       <strong class="text-uppercase">Amino Force</strong> 
       <span class="product-info-link"><a href="#">Kurzinfo</a></span> 
       </div> 
       <div class="col-4 text-right"> 
       <span class="product-info-price">CHF 34.00</span> 
       </div> 
      </div> 
      </div> 
      <div class="product-badge-wrapper"> 
      <div class="product-badge red"> 
       <div class="product-badge-content"> 
       new 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 

これはcodepenブツで見つけることができる全体のHTMLコードのほんの一部です。しかし、私はこれが唯一の関連する部分であると推測しました。もっと必要な場合は教えてください！

EDIT2

このインフォボックスの内容を拡大することができます。 「Kurzinfo」をクリックすると、展開されて詳細情報が表示されます。それは私が拡張機能を追加する前にそれを作成したので、codepenバージョンではありません。

Answer 1

斜めの角が目に見えない要素の境界線の一部であるため、通常は不可能です。

画像で

白に青の面積の変更はあなたが傾斜角黒の領域を持っている場合、それは境界線の一部であり、CSSで私たちはどんなこれを変更するために考えることはできません。（あなたが欲しいと変化します） 。 ボックスがと幅/高さをシャドウして変更することにより

.coverShadow { 
    position: absolute; 
    z-index: 999; 
    background-color: white; 
    box-shadow: 0 0 14px white; 
} 

.coverShadow.c1 { 
    width: 10px; 
    height: 35px; 
    background-color: white; 
    bottom: 8px; 
    right: -10px; 
} 

.coverShadow.c2 { 
    width: 35px; 
    height: 10px; 
    bottom: 0px; 
    right: 0; 
} 

：

<div class="product-info-wrapper"> 
    <div class="coverShadow c1"></div> 
    <div class="coverShadow c2"></div> 
    .... 

とCSS：

あなたは、製品のdivに追加牽引少しのdivによって影をカバーすることができますright/bottomのdivをカバーすると、よりスムーズになる可能性があります。

斜めのコーナーを作成していただきありがとうございます。