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, или что то иное, общий принцип все равно будет тот же.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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