Как убрать лишние выступы у блоки меню, имеющих закругленные границы?

Question

Чтобы у всех пунктов табулированного меню было скругление.

$(document).ready(function() {

  $(".t-head-item").on('click', function() {
    $(".t-head-item ").removeClass("t-head-item--active").eq($(this).index()).addClass("t-head-item--active");
    var index = $(this).index();
    $(".t-body").hide().eq(index).fadeIn()
  })
})

body {
     padding: 100px;
}
 .t {
     --tab-background: #437f98;
     --tab-text-color: #fff8f8;
     --tab-radius: 15px;
     --tab-padding: 20px;
     display: grid;
     grid-template-rows: auto auto;
     grid-template-columns: minmax(1rem, 1fr);
     min-width: 200px;
     color: var(--tab-text-color);
     filter: drop-shadow(2px 4px 6px gray);
}
 .t-head {
     display: flex;
     justify-content: flex-end;
}
 .t-head-item {
     position: relative;
     display: flex;
     align-items: center;
     justify-self: end;
     width: 50%;
     padding: var(--tab-padding);
     padding-bottom: calc(var(--tab-padding) / 2);
     border-radius: var(--tab-radius) var(--tab-radius) 0 0;
     filter: drop-shadow(-4px 0 2px gray);
}
 .t-head-item:before {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: calc(var(--tab-radius) * 2);
     height: calc(var(--tab-radius) * 2);
     background: transparent;
     border-radius: var(--tab-radius);
     box-shadow: var(--tab-radius) var(--tab-radius) 0 0 var(--tab-background);
     transform: translateX(-100%);
}
 .t-head span {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     font-weight: 600;
}
 .t-body {
     z-index: 2;
     padding: var(--tab-padding);
     border-radius: var(--tab-radius) 0 var(--tab-radius) var(--tab-radius);
     background: var(--tab-background);
}
 .t-head-item--active {
     background: var(--tab-background);
}

<div class="t">
  <div class="t-head">
    <div class="t-head-item t-head-item--active">
      text1
    </div>
    <div class="t-head-item">Header with icon</div>

  </div>

  <div class="t-body">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero officia, quam nulla quis praesentium iste quibusdam dicta at illo soluta sapiente est illum vitae. Inventore neque excepturi vitae voluptas reiciendis!
  </div>
  <div class="t-body" style="display: none">
    2Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero officia, quam nulla quis praesentium iste quibusdam dicta at illo soluta sapiente est illum vitae. Inventore neque excepturi vitae voluptas reiciendis!
  </div>
  
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Рекомендую изучить градиенты, ибо это предоставляет дополнительные и гораздо более широкие возможности.

$(document).ready(function() {
  $(".t-head-item").on('click', function() {
    $(".t-head-item ").removeClass("t-head-item--active").eq($(this).index()).addClass("t-head-item--active");
    var index = $(this).index();
    $(".t-body").hide().eq(index).fadeIn();
  })
})

body {
  padding: 100px;
}

.t {
  --tab-background: #437f98;
  --tab-text-color: #fff8f8;
  --tab-radius: 15px;
  --tab-padding: 20px;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: minmax(1rem, 1fr);
  min-width: 200px;
  color: var(--tab-text-color);
  filter: drop-shadow(2px 4px 6px gray);
}

.t-head {
  display: flex;
  justify-content: flex-end;
}

.t-head-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-self: end;
  width: 50%;
  padding: var(--tab-padding);
  padding-bottom: calc(var(--tab-padding) / 2);
  border-radius: var(--tab-radius) var(--tab-radius) 0 0;
  text-shadow: 0 2px 3px gray;
}

.t-head-item::before,
.t-head-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: var(--tab-radius);
  height: var(--tab-radius);
}

.t-head-item.t-head-item--active:not(:first-child)::before {
  right: 100%;
  background: 100% 100% / var(--tab-radius) var(--tab-radius) radial-gradient(var(--tab-radius) circle at 0 0, transparent calc(100% - 1px), var(--tab-background) 100%) no-repeat;
}

.t-head-item.t-head-item--active:not(:last-child)::after {
  left: 100%;
  background: 100% 100% / var(--tab-radius) var(--tab-radius) radial-gradient(var(--tab-radius) circle at 100% 0, transparent calc(100% - 1px), var(--tab-background) 100%) no-repeat;
}

.t-head span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 600;
}

.t-head-item--active {
  background: var(--tab-background);
}

.t-body {
  z-index: 2;
  padding: var(--tab-padding);
  border-radius: var(--tab-radius);
  background: var(--tab-background);
}

.t-head + .t-body {
  border-radius: 0 var(--tab-radius) var(--tab-radius) var(--tab-radius);
}

.t-body:last-child {
  border-radius: var(--tab-radius) 0 var(--tab-radius) var(--tab-radius);
}

<div class="t">
  <div class="t-head">
    <div class="t-head-item t-head-item--active">Tab 1</div>
    <div class="t-head-item">Tab 2</div>
    <div class="t-head-item">Tab 3</div>
    <div class="t-head-item">Tab 4</div>
  </div>
  <div class="t-body">
    1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero officia, quam nulla quis praesentium iste quibusdam dicta at illo soluta sapiente est illum vitae. Inventore neque excepturi vitae voluptas reiciendis!
  </div>
  <div class="t-body" style="display: none">
    2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero officia, quam nulla quis praesentium iste quibusdam dicta at illo soluta sapiente est illum vitae. Inventore neque excepturi vitae voluptas reiciendis!
  </div>
  <div class="t-body" style="display: none">
    3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero officia, quam nulla quis praesentium iste quibusdam dicta at illo soluta sapiente est illum vitae. Inventore neque excepturi vitae voluptas reiciendis!
  </div>
  <div class="t-body" style="display: none">
    4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero officia, quam nulla quis praesentium iste quibusdam dicta at illo soluta sapiente est illum vitae. Inventore neque excepturi vitae voluptas reiciendis!
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

Как убрать лишние выступы у блоки меню, имеющих закругленные границы?

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