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

有许多绝对设定的尺寸，这就是我的意思＆＃34;我不知道我的代码是如何重复使用的＃34;。如果你需要这样的东西，你必须玩这些数字。可能有更好的解决方案，但现在它适用于我正在进行的项目。