创建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 */ 
     } 
    } 
    } 
} 

这里是我如何将它放在HTML代码

<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> 

有很多绝对尺寸组，这就是我的意思与“我不知道我的代码是多么可重用“。如果你需要这样的东西，你必须玩弄数字。可能有更好的解决方案，但现在它适用于我正在开发的项目。