Как сделать бейдж на блок / кнопку с верхнего правого края?

Question

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

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

Answer 1

#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>

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

БЛОГ НА HUSL

Как сделать бейдж на блок / кнопку с верхнего правого края?

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