<svg style="position: absolute; z-index: -9999" width="0" height="0">
  <defs>
    <filter id="card-border">
      <feFlood flood-color="#f5f5f5" flood-opacity="1"/>
      <feComposite in2="SourceAlpha" operator="in" result="borderColor"/>
      <feGaussianBlur in="borderColor" stdDeviation="3" result="borderBlur"/>
      <feComponentTransfer in="borderBlur" result="border">
        <feFuncA type="linear" slope="20" intercept="-1"/>
      </feComponentTransfer>
      
      <feMerge>
        <feMergeNode in="border"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>

    </filter>
  </defs>
</svg>

<div class="card">
  <div class="card__label">
    <span class="card__label-text">Lorem ipsum?</span>
  </div>
  <div class="card__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa repellendus, eaque rem amet maxime totam est neque nesciunt iste voluptas laudantium animi quisquam voluptates magnam! Culpa sunt quae expedita nobis!</div>
</div>

body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.card {
  position: relative;
  width: 50%;
  filter: url('#card-border') drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
  z-index: 0;
}
.card::before {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
  z-index: -1;
}

.card__label {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.card__label-text {
  position: relative;
  display: inline-block;
  padding: 8px 16px;
  color: orangered;
  font-weight: 700;
}

.card__label-text::after {
  content: '';
  position: absolute;
  top: 0;
  right: -60px;
  width: 200%;
  height: 100%;
  background-color: #fff;
  transform: skew(66deg);
  transform-origin: 100% 100%;
  z-index: -1;
}

.card__content {
  padding: 8px 16px 16px;
  background-color: #fff;
}