как сверстать такое на чистом css

Question

и что бы можно было прикрепить через after

div:after {}

Answer 1

небольшой пример, но так не надо делать, потому что стили так себе адаптивные

div {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 50px;
  width: 100px;
  background-color: #f7d304;
  text-align: center;
  color: #ea2716;
  font-size: 25px;
  font-weight: bold;
  border-radius: 50px 0 0 50px;
}

div:before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  background-color: #d7d7d7;
  border-radius: 50%;
  border: 3px solid white;
}

<div>50%</div>

Answer 2

Пример

body {
  background: url(https://c.pshere.com/photos/df/4c/background_beach_blue_sky_boat_clouds_exotic_horizon_idyllic-1000891.jpg!d) no-repeat center top /cover;
}

.discount {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2rem;
  color: #f00;
  font-size: 28px;
  font-weight: 700;
  border-radius: 35px 0 0 35px;
  border: 2px solid #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
  overflow: hidden;
  box-sizing: border-box;
}

.discount::before {
  content: '';
  box-shadow: 0 0 0 2px #fff, 0 0 0 500px #FFD300;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 1rem;
  box-sizing: border-box;
}

<div class="discount">50%</div>

Answer 3

Вариант не затрагивающий стили (кроме обязательного position: relative;) и контент родительского блока - стилизуется только сам псевдоэлемент.

Скидочный ярлык можно прикрепить к любому блоку, добавив пользовательский атрибут data-discount="". В атрибуте нужно указать текст с размером скидки (сделать это можно, как вручную, так и из скриптов).

Адаптивностью не занимался, просто максимально точно повторил дизайн ярлыка:

body { display: flex; justify-content: space-around; background: url("https://i.stack.imgur.com/m9NKc.png") no-repeat, #ddd; }

.card {
  /* Важно! */
  position: relative;
  /* Чисто визулка. */
  height: 300px; width: 200px;
  padding: 10px; background-color: #fff;
  box-shadow: 2px 5px 10px -3px #000, inset 0 0 1px 3px #eee, inset 0 0 100px -60px #000;
}
/* Собственно, сам ярлычок */
[data-discount]::after {
  content: attr(data-discount);
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 88%;
  height: 89px;
  width: 159px;
  border-radius: 45px 10px 10px 45px;
  background-image: radial-gradient( circle at 14.2% 50%, transparent 6%, #fefefe 7%, #fefefe 8%, #ffd300 9%);
  color: #f22613;
  font: 48px/89px serif;
  text-indent: 35px;
  text-align: center;
  box-shadow: inset 0 0 1px 3px #fefefe;
  filter: drop-shadow(1px 5px 3px rgba(0, 0, 0, .5));
}

<div class="card" data-discount="50%">Выберите размер скидки
  <input type="range" oninput="this.parentElement.dataset.discount = this.value + '%';">
</div>
<div class="card" data-discount="-30%">Фиксированная скидка</div>
<div class="card">Скидки нет</div>

Шрифт используемый в оригинальном дизайне стоит $89 :-)

БЛОГ НА HUSL

как сверстать такое на чистом css

Ответы (3 шт):