html - 使用 CSS 创建类似丝带的徽章

Question

我有一个带斜 Angular 的小盒子，看起来像这样:

斜 Angular 是在以下代码片段的帮助下完成的: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>

有很多绝对设置的维度，这就是我所说的“我不知道我的代码的可重用性如何”的意思。如果您需要这样的东西，您将不得不使用这些数字。可能有更好的解决方案，但目前它适用于我正在进行的元素。