私はこのようになり、傾斜角の小さな箱、持っているCSS

Question

でリボン状のバッジを作成します。https://codepen.io/myf/pen/FLzva：

を傾斜角は、このスニペットの助けを借りて行われました。しかし、単にリンクが死んだ場合には、私はここに私のSCSSのコードを入れます：

.product-info { 
    position: relative; 
    padding: $spacer * .5; 
    padding-right: $spacer * 2; 
    overflow: hidden; 
    &-link { 
    display: block; 
    a { 
     color: $gray-dark; 
     transition: color $animation-fast; 
     &:hover { 
     color: $brand-primary; 
     text-decoration: none; 
     } 
    } 
    } 
    &-price { 
    color: $brand-primary; 
    } 
    &:before, 
    &:after { 
    position: absolute; 
    content: ""; 
    left: 0; 
    z-index: -1; 
    background-color: $gray-lighter; 
    border-color: $gray-lighter; 
    } 
    &: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; 
    } 
} 

が、私は今、このボックスにバッジを追加できるようにする必要があります。私はそれをデータ属性で行うことを考えました。 <div class="product-info" data-badge="New">...</div>、データ属性がdiv.product-infoの場合はバッジが表示されます。バッジはこのように見ています

私は残念ながら、これを達成するためにどのようには考えています。正しい方向へのプッシュは非常に高く評価されます！

Answer 1

私はCSSでそれを自分で行うことができました。私は解決策がどれほど優れているか、どのようにコードを再利用できるかはわかりませんが、私の場合はうまくいきます。私が最初に意図したように、私はデータ属性でこれをやっていませんでした。なぜなら、これはお尻にもっと痛みがあったように感じるからです。私は別々の要素を作成したので、HTML構造体にどこに配置するか注意する必要があります。ここでコメントして全体SCSSコードです：

.product-badge-wrapper { /* I needed the wrapper for positioning the badge */ 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    .product-badge { /* This is the actual badge */ 
    position: relative; 
    width: 100px; 
    overflow: hidden; 
    &.red { 
     /* I need the badge in two versions, a gray version and a red version. 
     * The .red class just deals with some colors and can be ignored. */ 
     &:before, 
     &:after { 
     border-color: $brand-primary; 
     background-color: transparent; 
     } 
     &:after { 
     background-color: transparent; 
     border-left-color: transparent; 
     } 
     .product-badge-content { 
     &:before { 
      border-color: darken($brand-primary, 10%); 
      border-left-color: transparent; 
      border-right-color: transparent; 
     } 
     } 
    } 
    /* These next few :befores and :afters are for the general shape 
     of The badge. This is just the rectangle with the 45deg slant*/ 
    &:before, 
    &:after { 
     content: ""; 
     position: absolute; 
     left: 0; 
     background-color: transparent; 
     border-color: $gray-light; 
    } 
    &:before { 
     top: 20px; 
     right: 0; 
     bottom: 0; 
    } 
    &:after { 
     bottom: auto; 
     left: -1px; 
     top: -10px; 
     border-style: solid; 
     border-width: 0 0 75px 75px; /* This is where the main magic for the slant happens */ 
     background-color: transparent; 
     border-left-color: transparent; 
     width: 100px; 
    } 
    /* Now for the little fold I needed an extra class to attach a 
     :before to. This class seems really bloated and could be trimmed 
     down probably. A lot of it is just positioning and text stuff */ 
    .product-badge-content { 
     height: 43px; 
     padding-right: 5px; 
     padding-left: 22px; 
     display: flex; 
     justify-content: flex-end; 
     align-items: center; 
     text-align: right; 
     text-transform: uppercase; 
     font-weight: 700; 
     position: relative; 
     z-index: 10; 
     color: $white-base; 
     &.text-small { 
     font-size: .7rem; 
     font-weight: 400 !important; 
     } 
     /* This is where the fold is created */ 
     &:before { 
     content: ""; 
     position: absolute; 
     left: 11px; 
     bottom: 0; 
     display: block; 
     border-style: solid; 
     border-color: $gray-dark; 
     border-left-color: transparent; 
     border-right-color: transparent; 
     border-width: 10px 10px 0 10px; /* Magic happens here. We create a downward arrow */ 
     } 
    } 
    } 
} 

は、そして、ここで私は "と何を意味している、絶対にセット寸法がたくさんあります

<div class="product-info-wrapper"> 
    <div class="product-info"> 
    <!-- Gray box with product name and price --> 
    </div> 
    <!-- Badge here --> 
    <div class="product-badge-wrapper"> 
    <div class="product-badge"> 
     <div class="product-badge-content text-small"> 
     nicht<br>auf lager 
     </div> 
    </div> 
    </div> 
</div> 

HTMLコードに配置する方法であります私はコードを再利用できるかどうかわかりません。 "あなたはこのようなものが必要な場合は、数字で遊ぶ必要があります。おそらくもっと良い解決法がありますが、現在は私が取り組んでいるプロジェクトでうまくいきます。