Как создать такую фигуру на css c текстом внутри?

Question

подскажите, возможно ли создать такую фигуру на css

Answer 1

Можете попробовать сделать с помощью псевдо элементов

body {background-color: black;}
.main {width: max-content;}
.first, .second {padding: 1rem; background-color: white;}
.first {font-size: 5rem; font-weight: bold; border-radius: 1rem 1rem 1rem 0rem;}
.second {font-size: 3rem; width: max-content; border-radius: 0rem 0rem 1rem 1rem; position: relative;}
.second::before {content: ' '; position: absolute; top: 0; right: -1rem; width: 1rem; height: 1rem; background: radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0) 1rem, white 1rem);}

 <div class="main">
  <div class="first">Краснодар</div>
  <div class="second">30 минут</div>
 </div>

Answer 2

Мне кажется в таком случае лучше использовать svg чтобы не создавать костылей в css, может Вам подойдёт что-то на подобии этого:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body  style="background-color: #000">
<!-- Сам по себе блок svg -->        
<svg width="528" height="222" viewBox="0 0 528 222" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- Фигура -->  
  <path fill-rule="evenodd" clip-rule="evenodd" d="M30 0C13.4315 0 0 13.4315 0 30V57V116V127V136V192C0 208.569 13.4315 222 30 222H296C312.569 222 326 208.569 326 192V180V176C326 159.431 339.431 146 356 146H389H498C514.569 146 528 132.569 528 116V30C528 13.4315 514.569 0 498 0H30Z" fill="white"/>
  <!-- Стилизация текста -->  
  <g fill="black" font-family="Verdana, serif" font-size="80" font-weight="900">
    <!-- Сам текст -->  
    <text x="15" y="90"> Краснодар </text>
  </g>
  <g fill="black" font-family="Verdana, serif" font-size="50" font-weight="900">
    <text x="260" y="190"  style="text-anchor: end;"> 30 минут </text>    
  </g>
</svg>


  </body>
</html>

БЛОГ НА HUSL

Как создать такую фигуру на css c текстом внутри?

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