The CSS implements rounded trapezoid

rendering

code

• html

<div class="tag-wrapper">
  <div class="title-box">Matters needing attention</div>
</div>
Copy the code

• css

.tag-wrapper {
  .title-box {
    position: relative;
    width: 1.20 rem;
    height: 0.30 rem;
    line-height: 0.27 rem;
    text-align: center;
    color: #fff;
    font-size: 0.16 rem;
    font-weight: bold;
    z-index: 0;
    &::before {
      content: ' ';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      transform-origin: top left;
      background: $PRO_COLOR;
      transform: perspective(0.1 rem) rotateX(-2deg);
      border-radius: 0.02 rem 0.04 rem 0.04 rem 0.02 rem;
    }
    &::after {
      content: ' ';
      position: absolute;
      right: -0.02 rem;
      width: 0.04 rem;
      height: 0.28 rem;
      background-color: $PRO_COLOR;
      transform: rotate(23deg);
      border-radius: 0.02 rem; }}}Copy the code