Как сделать впуклость в html и css?

Question

Как сделать впуклость на границе контейнера на html и css как на картинке?

Answer 1

нуууу... например так. кривовато конечно, но подправить никто не запрещает :3

body {
  background: pink;
  display: grid;
  grid-template-columns: repeat(3, 5em);
  grid-auto-rows: 5em;
}

body:hover {
  grid-gap: 1em;
}

.x, .y {
  display: inline-block;
  outline: 5px solid transparent;
  background: brown;
}

.x:hover {
  outline-color: lime;
}

.y {
  grid-column: span 3;
}

.x:nth-child(2) {
  background: radial-gradient(circle closest-side at 50% 50%, transparent 0, transparent 100%, brown 101%);
  border-radius: 65% 65% 0 0;
}

.x:first-child {
  border-radius: 0 60% 0 0;
}

.x:nth-child(3) {
  border-radius: 60% 0 0 0;
}

<div class='x'>a</div>
<div class='x'>b</div>
<div class='x'>c</div>
<div class='y'>d</div>

Answer 2

.container {
  width: 1145px;
  height: 203px;
  background: #483c32;
}

<div class="container">
  <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="1145" height="203" viewBox="0 0 3578 634" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0,634) scale(0.1,-0.1)"
fill="#a48f77" stroke="none">
<path d="M0 3180 l0 -3160 17880 0 17880 0 0 3160 0 3160 -6388 0 -6389 0 -59
-20 c-32 -12 -111 -34 -175 -50 -78 -19 -150 -46 -217 -79 -56 -28 -132 -59
-170 -70 -82 -22 -180 -76 -392 -216 -260 -171 -470 -345 -685 -566 -315 -325
-516 -611 -885 -1260 -217 -382 -453 -691 -795 -1038 -301 -306 -653 -582
-880 -691 -140 -68 -382 -153 -493 -174 -42 -9 -117 -26 -167 -40 -81 -21
-118 -24 -370 -31 -229 -5 -305 -4 -419 10 -380 45 -720 181 -1048 422 -59 43
-147 103 -195 133 -57 36 -124 92 -193 160 -294 295 -466 477 -558 593 -106
132 -314 434 -368 535 -17 31 -49 86 -72 121 -23 35 -42 68 -42 73 0 25 -405
663 -504 793 -215 283 -502 566 -790 780 -341 253 -658 419 -1052 551 l-192
64 -6131 0 -6131 0 0 -3160z"/>
</g>
</svg>
</div>

Проще всего делать через svg, вырезав бОльшую часть. Создаете <div>, который будет играть роль контейнера, задаёте необходимые размеры и фон, внутрь контейнера помещаете svg, закрашиваете его +- контрастным фону цветом.

БЛОГ НА HUSL

Как сделать впуклость в html и css?

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