Как сделать круг в центре блока css

Question

Для того что бы сделать ценник нужно, посередине сделать окружность

как это можно сделать?

Answer 1

Что-то типа такого...

.box {
  position: relative;
  display: inline-block;
  background-color: green;
  padding: 5px 20px 5px 20px;
  font-size: 20pt;
}
.box:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 5px;
  bottom: 5px;
  right: 35px;
  color: red;
  border-left: 1px solid;
}

.box div {
  position: relative;
  padding: 10px 30px 10px 30px;
  background-color: #fff;
  border-radius: 5px;
}

.box div:before,
.box div:after {
  content: ' ';
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background-color: green;
  border-radius: 50%;
}

.box div:before {
  left: -10px;
}

.box div:after {
  right: -10px;
}

<div class='box'>
  <div>1 890 ₽</div>
</div>

Answer 2

Эту штуку нарисовать в svg и перевести в background этим сервисом: https://yoksel.github.io/url-encoder/ ну и подогнать под нуные размеры - примерно так

* {
  margin: 0;
  padding: 0;
}

.item {
  width: 66px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg viewBox='31 7 143 79' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill:%23fff;fill-rule:evenodd;stroke-width:0.264583' d='M 42.654661,7.3767691 H 161.97546 c 6.30747,0 11.38533,5.0778569 11.38533,11.3853299 v 15.360287 c -10.09707,0.419622 -10.39459,24.128555 0,25.003291 v 14.96132 c 0,6.307473 -5.07786,11.38533 -11.38533,11.38533 H 42.654661 c -6.307473,0 -11.38533,-5.077857 -11.38533,-11.38533 l 0,-14.789532 c 8.881762,-1.046524 8.881762,-25.641404 0,-25.144843 l 0,-15.390523 c 0,-6.307473 5.077857,-11.3853299 11.38533,-11.3853299 z' /%3E%3Cpath d='M164 8 164,85' stroke='red' stroke-width='0.5'/%3E%3C/svg%3E%0A"), #1d6b54;
  background-size: 64px 38px;
  background-position: 3px 4px;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px
}

<div class="item">
  <p>1890 &#8381;</p>
</div>

Потренироваться поизменять какие то значения можно тут: https://codepen.io/topicstarter/pen/LYBYMdW Либо нарисовать и перевести в шрифт эту фигуру и стилизовать, примерно вот так(архив в облаке mail.ru): https://cloud.mail.ru/public/YiAi/QuoVmp2Q8

Answer 3

Вариант с использованием box-shadow

.bg {
   background-color: green;
   padding: 1rem;
}

.bg--red {
   background-color: red;
}

.bg--gradient {
  background: radial-gradient(circle, rgba(17,121,9,0.5690651260504201) 50%, rgba(0,48,255,1) 100%);
}

.price {
  position: relative;
  display: inline-block;  
  font-size: 20px;
  overflow: hidden;
  border-radius: 5px;
}

.price::before,
.price::after{
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 60px #fff;
}

.price::after {
  left: auto;
  right: -10px;
}

.price__value {
  position: relative;
  z-index: 1;
  padding: 10px 30px;  
}

<div class="bg">
  <div class="price">
    <div class="price__value">1 890 ₽</div>
  </div>
</div>
<div class="bg bg--red">
  <div class="price">
    <div class="price__value">1 890 ₽</div>
  </div>
</div>
<div class="bg bg--gradient">
  <div class="price">
    <div class="price__value">1 890 ₽</div>
  </div>
</div>

Answer 4

Был похожий вопрос, где требовалось так же добавлять полукруг на края.

Принцип тот же, используем так же mask, но при этом не дублируем на всю высоту, а только один полукруг по центру с каждой стороны.

.ticket {
  display: block;
  width: 150px;
  height: 50px;
  background-color: #651fff;
  border-radius: 10px;
  -webkit-mask-image:
    linear-gradient(to bottom, #fff, #fff),
    linear-gradient(to bottom, #fff, #fff),
    linear-gradient(to bottom, #fff, #fff),
    radial-gradient(circle at -15% 50%, transparent 42.5%, #fff calc(42.5% + 0.75px)),
    radial-gradient(circle at 115% 50%, transparent 42.5%, #fff calc(42.5% + 0.75px));
          mask-image:
    linear-gradient(to bottom, #fff, #fff),
    linear-gradient(to bottom, #fff, #fff),
    linear-gradient(to bottom, #fff, #fff),
    radial-gradient(circle at -15% 50%, transparent 42.5%, #fff calc(42.5% + 0.75px)),
    radial-gradient(circle at 115% 50%, transparent 42.5%, #fff calc(42.5% + 0.75px));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0, 10px 50%, 0 100%, 0 center, 100% center;
          mask-position: 0 0, 10px 50%, 0 100%, 0 center, 100% center;
  -webkit-mask-size: 100% calc(50% - 10px), calc(100% - 20px) 20px, 100% calc(50% - 10px), 10px 20px, 10px 20px;
          mask-size: 100% calc(50% - 10px), calc(100% - 20px) 20px, 100% calc(50% - 10px), 10px 20px, 10px 20px;
}

<div class="ticket"></div>

БЛОГ НА HUSL

Как сделать круг в центре блока css

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