Стилизация блоков

Question

Подскажите как можно такое на CSS или с помощью других инструментов сделать. Чтобы верхний блок соединялся с нижним таким образом (смотреть на фото, выделено красным), как бы перетекал)

Answer 1

Очень просто, на CSS. Пример:

* {margin: 0; padding: 0;}

ul {
  list-style: none;
  background: #2b373d; border-bottom: 5px solid #445760;
  height: 40px; line-height: 40px;
  font-size: 14px; font-family: monospace;
}

li {display: inline-block;}

.active {
  margin: 0 -20px;
  background: #445760; background-image: linear-gradient(to bottom, #2b373d, #2b373d 14px, transparent 14px, transparent 100%);
}

.active::before, .active::after {
  content: ""; display: block; width: 40px; height: 40px; background: #2b373d;
}

.active::before {float: left; border-bottom-right-radius: 25%;}
.active::after {float: right; border-bottom-left-radius: 25%;}

a {display: inline-block; padding: 0 20px; color: #fff; text-decoration: none;}

.active a {background: #445760; border-radius: 14px 14px 0 0;}

<ul>
  <li><a href="#">Первый</a></li>
  <li><a href="#">Второй</a></li>
  <li class="active"><a href="#">Третий</a></li>
  <li><a href="#">Четвертый</a></li>
  <li><a href="#">Пятый</a></li>
</ul>

Это дополнительно, чтобы поклацать ссылочки:

$('ul li').click(function() {
  $('ul li').removeClass('active');
  $(this).addClass('active');
});

* {margin: 0; padding: 0;}

ul {
  list-style: none;
  background: #2b373d; border-bottom: 5px solid #445760;
  height: 40px; line-height: 40px;
  font-size: 14px; font-family: monospace;
}

li {display: inline-block;}

.active {
  margin: 0 -20px;
  background: #445760; background-image: linear-gradient(to bottom, #2b373d, #2b373d 14px, transparent 14px, transparent 100%);
}

.active::before, .active::after {
  content: ""; display: block; width: 40px; height: 40px; background: #2b373d;
}

.active::before {float: left; border-bottom-right-radius: 25%;}
.active::after {float: right; border-bottom-left-radius: 25%;}

a {display: inline-block; padding: 0 20px; color: #fff; text-decoration: none;}

.active a {background: #445760; border-radius: 14px 14px 0 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li><a href="#">Первый</a></li>
  <li><a href="#">Второй</a></li>
  <li class="active"><a href="#">Третий</a></li>
  <li><a href="#">Четвертый</a></li>
  <li><a href="#">Пятый</a></li>
</ul>

БЛОГ НА HUSL

Стилизация блоков

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