2

введите сюда описание изображения

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

div:after {}
1
  • Не думаю что это возможно только с приминением css, попробуйте использовать маски в виде картинки либо же SVG 1 апр 2020 в 15:08

2 ответа 2

5

Пример

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>

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.