Как нарисовать прямоугольник с выгнутыми сторонами в CSS?

Question

Нужно создать такой прямоугольник как на рисунке - все стороны слегка выгнуты наружу, буквально на несколько пикселей, углы скруглены. Пробовал и с помощью border-radius, и с помощью clip-path - не вышло. Эта форма будет использоваться как базовая кнопка с текстом внутри. Нужна помощь.

Answer 1

#abc, #def{
display: inline-block;
}

#abc{
margin-left: 50px;
padding: 5px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-radius: 100% / 10%;
overflow: visible;
width: 150px;
height: 150px;
}
#def{
border-right: 3px solid black;
border-left: 3px solid black;
border-radius: 10% / 100%;
position: relative; left: -15px;
width: 175px;
height: 150px;
}

<div id='abc'>
<div id='def'>
</div>
</div>

углы правда тусклые, но если не нравится, всегда есть svg

UPD: впрочем...

div{display:grid;
grid-template-columns: 15px 150px 150px 15px;
grid-template-rows: 15px 150px 150px 15px;
}
#a, #c, #f, #h{border-radius: 100% 0 / 100% 0;}
#b, #d, #e, #g{border-radius: 0 100% / 0 100%;}

#a, #b, #c, #d{border-top: 5px solid black;}
#e, #f, #g, #h{border-bottom: 5px solid black;}
#a, #c, #e, #g{border-left: 5px solid black;}
#b, #d, #f, #h{border-right: 5px solid black;}

#a{grid-row: 1;grid-column: 2;}
#b{grid-row: 1;grid-column: 3;}
#c{grid-row: 2;grid-column: 1;}
#d{grid-row: 2;grid-column: 4;}
#e{grid-row: 3;grid-column: 1;}
#f{grid-row: 3;grid-column: 4;}
#g{grid-row: 4;grid-column: 2;}
#h{grid-row: 4;grid-column: 3;}

<div>
<b id='a'>a</b>
<b id='b'>b</b>
<b id='c'>c</b>
<b id='d'>d</b>
<b id='e'>e</b>
<b id='f'>f</b>
<b id='g'>g</b>
<b id='h'>h</b>
</div>

Answer 2

Рассмотрите, как писал в комментарии @andreymal, вариант решения SVG.
Это позволит точно повторить размеры и соотношения сторон, как в задании.
К тому же решение будет адаптивным и выглядеть одинаково на всех гаджетах.

#1. Загружаете растровое изображение в векторный редактор - Inkscape

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="75%" height="75%" viewBox="0 0 1592 844" preserveAspectRatio="xMinYMin meet" >  

<image xlink:href="https://i.stack.imgur.com/P4b6y.jpg" width="100%" height="100%" />
</svg>

#2. По контуру наносите узловые точки и с помощью рычагов управления этих точек добиваетесь полного совпадения с контуром исходной фигуры.

#3. Сохраняете файл в формате SVG

#4. Добавляете строку для вывода текста внутри SVG (кнопки)

 <text y="50%" x="50%" font-size="300px" font-family="sans-serif" font-weight="700"
  fill="GREY" text-anchor="middle" alignment-baseline="central"  >START </text>

#5. svg оборачиваете в родительский контейнер div class="button" и теперь можно размещать кнопку в любом месте и менять её размеры, изменяя width и height родительского контейнера.

width:50vw;
 height:50vh;

<style>
.button {
 width:50vw;
 height:50vh;
}
</style>
<div class="button">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet" id="svg4" viewBox="0 0 1592 844">
    <path d="M157.6 110.3c231.4-7.5 433.4-13.7 650-13.6 209.7 0 439.4 4.6 628.7 13.6 20.7 1 43.4 25.2 44.8 46.7 6.8 105.6 12.3 189.3 11.6 284.1-.5 82.9-6.3 171.5-13.6 248.2a46.9 46.9 0 0 1-44.7 41.8c-201.8 14.2-412.5 18-621.9 18.5-219 .5-414.7-2.2-656.8-16.5-21-1.3-45.6-15.8-46.7-42.9-2.8-65.6-9.4-166.2-10.6-251-1.5-94.8 4.1-190.4 12.5-286.1 2-22.9 15-41.8 46.7-42.8z" id="path825" fill="none" stroke="black" stroke-width="20"/>
      <text y="50%" x="50%" font-size="300px" font-family="sans-serif" font-weight="700" fill="GREY" text-anchor="middle" alignment-baseline="central"  >START </text>
</svg>
</div>

width:10vw;
 height:10vh;

<style>
.button {
 width:10vw;
 height:10vh;
}
</style>
<div class="button">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet" id="svg4" viewBox="0 0 1592 844">
    <path d="M157.6 110.3c231.4-7.5 433.4-13.7 650-13.6 209.7 0 439.4 4.6 628.7 13.6 20.7 1 43.4 25.2 44.8 46.7 6.8 105.6 12.3 189.3 11.6 284.1-.5 82.9-6.3 171.5-13.6 248.2a46.9 46.9 0 0 1-44.7 41.8c-201.8 14.2-412.5 18-621.9 18.5-219 .5-414.7-2.2-656.8-16.5-21-1.3-45.6-15.8-46.7-42.9-2.8-65.6-9.4-166.2-10.6-251-1.5-94.8 4.1-190.4 12.5-286.1 2-22.9 15-41.8 46.7-42.8z" id="path825" fill="none" stroke="black" stroke-width="20"/>
      <text y="50%" x="50%" font-size="300px" font-family="sans-serif" font-weight="700" fill="GREY" text-anchor="middle" alignment-baseline="central"  >START </text>
</svg>
</div>

БЛОГ НА HUSL

Как нарисовать прямоугольник с выгнутыми сторонами в CSS?

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