主页 / 问题 / 1579800
Accepted
Майя
Asked:2024-05-11 13:20:06 +0000 UTC2024-05-11 13:20:06 +0000 UTC

如何在 CSS 中创建这样一个带有文本的形状？

  • 772

告诉我，是否可以使用 CSS 创建这样的形状？

在此输入图像描述

html

2 个回答

  1. Best Answer

    在我看来，在这种情况下最好使用 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="290" y="190"  style="text-anchor: end;"> 30 минут </text>    
  </g>
</svg>


  </body>
</html>

    • 2

  2. 您可以尝试使用伪元素

    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>

    • 0

相关问题