3

Подскажите как можно сделать нечто похожее в верхнем правом углу:

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

Это делается с помощью position: relative; или есть более правильное решение?

2 ответа 2

3
#content {
    position: relative;
}
#content img {
    position: absolute;
    top: 0px;
    right: 0px;
}

<div id="content">
    <img src="images/ribbon.png" class="ribbon"/>
    <div>some text...</div>
</div>
2

Это обычно делаться при помощи псевдоэлементов, таких как before или after:

body {
  background-color: #f2f2f2;
}

div {
  position: relative;
  display: inline-block;
  font-size: 14px;
  color: white;
  background-color: #4285F4;
  padding: 10px 50px;
  border-radius: 10px;
  margin: 20px;
}

div::after {
  content: "ХИТ";
  position: absolute;
  top: -12px;
  right: -12px;
  display: inline-block;
  font-size: 8px;
  color: initial;
  background-color: white;
  padding: 12px 8px;
  border-radius: 50%;
}
<div>PREMIUM</div>

Это может быть div, button, или что то иное, общий принцип все равно будет тот же.

Ваш ответ

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

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