Как сделать закругленное обьединение блоков?

Question

Как сделать такое закругленное соединение блоков?

К сожалению вставить код не могу, так как используется LESS и тут он отображается некорректно.

Answer 1

ну например так...

#x{
  display: grid;
  grid-template: 2em / repeat(4, 1fr);
  grid-gap: 1em;
  position: fixed;
}

#x>*{
  background: blue;
  color: white;
  border-radius: 1em / .5em;
  padding: .4em;
  position: relative;
}
#x>*:not(:first-child):before{
  content: '';
  display: inline-block;
  height: 100%;
  width: 1em;
  position: absolute;
  top: 0; left: -1em;
  background: radial-gradient(circle farthest-side at 50% 0, transparent 0%, transparent 35%, transparent 35%, red 35%, red 65%, transparent 65%),
  radial-gradient(circle farthest-side at 50% 100%, transparent 0%, transparent 35%, transparent 35%, red 35%, red 65%, transparent 65%);
}

body{height: 1000vh; background: linear-gradient(45deg, green, gray, brown, gold, violet, lime, white) no-repeat;}

<div id='x'>
  <b>о!</b>
  <b>еще</b>
  <b>челлендж</b>
  <b>я в деле</b>
</div>

разумеется, скругления самих блоков тоже можно сделать градиентами.

БЛОГ НА HUSL

Как сделать закругленное обьединение блоков?

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