0

добавляется непонятный бордер

введите сюда описание изображения

введите сюда описание изображения

$(document).on('click', '.reg__box', function() {
    $(".reg__elem").removeClass("reg__elem--active");
    $(this).parents(".reg__elem").addClass("reg__elem--active");
    var index = $(this).parents(".reg__elem").index();
    console.log(index);
    $(".reg__desc").hide(0).eq(index).fadeIn(0);
  })
.reg__tabs {
    --tab-background: #f7fafc;
    --tab-text-color: #fff8f8;
    --tab-radius: 24px;
    --tab-padding: 20px;
    width: calc(100% + 24px);
    margin-left: -12px;
}

.reg__head {
    display: flex;
    flex-wrap: wrap;
}

.reg__elem {
    width: 50%;
    padding-top: 12px;
    padding-right: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-self: end;
    width: 50%;
    border-radius: var(--tab-radius) var(--tab-radius) 0 0;
}

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

.reg__elem.reg__elem--active {
    background-color: var(--tab-background);
}

.reg__elem.reg__elem--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% - 2px), var(--tab-background) 100%) no-repeat;
}

.reg__elem.reg__elem--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% - 2px), var(--tab-background) 100%) no-repeat;
}

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

.reg__desc:first-child {
    border-radius: 0 var(--tab-radius) var(--tab-radius) var(--tab-radius);
}

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

.reg__box {
    cursor: pointer;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #e9e8f4;
    border-radius: 15px;
    background-color: #fff;
    margin-left: 12px;
    margin-bottom: 24px;
}

.reg__icon {
    display: block;
    width: 38px;
    height: 38px;
}

.reg__icon img {
    display: block;
}

.reg__content {
    display: block;
    width: calc(100% - 38px);
    padding-left: 16px;
    padding-right: 45px;
    pointer-events: none;
}

.reg__change,
.reg__time,
.reg__text {
    display: block;
}

.reg__input {
    display: none;
}

.reg__input:checked + label:after {
    border: 4px solid #3453f3;
}

.reg__label {
    cursor: pointer;
    display: flex;
    width: 100%;
    align-items: center;
    padding: 15px 20px;
    padding-right: 10px;
}

.reg__label:after {
    position: absolute;
    content: ' ';
    top: 50%;
    transform: translateY(-50%);
    right: 18px;
    width: 18px;
    height: 18px;
    border: 1px solid #e9e8f4;
    border-radius: 20px;
}

*{box-sizing: border-box;}

body {
  padding: 20px;
}
<div class="reg__tabs">
  <div class="reg__head">
    <div class="reg__elem reg__elem--active">
      <div class="reg__box">
        <input type="radio" checked="" id="r_courier" class="reg__input" name="delivery">
        <label for="r_courier" class="reg__label">
          <span class="reg__icon">
            <img src="img/order/delivery_courier.svg" alt="">
          </span>
          <span class="reg__content">
            <span class="reg__change">title 1</span>
            <span class="reg__time">c 09:00 до 20:00</span>
            <span class="reg__text">text 1</span>
          </span>
        </label>

      </div>
    </div>
    <div class="reg__elem">
      <div class="reg__box">
        <input type="radio" id="r_nova" class="reg__input" name="delivery">
        <label for="r_nova" class="reg__label">
          <span class="reg__icon">
            <img src="img/order/nova_poshta.svg" alt="">
          </span>
          <span class="reg__content">
            <span class="reg__change">Доставка</span>
            <span class="reg__time">1 - 3 дня</span>
            <span class="reg__text">text2</span>
          </span>
        </label>
      </div>
    </div>
  </div>
  <!--end reg__holder-->
  <div class="reg__body">
    <div class="reg__desc" style="">
      <p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Consectetur ex sapiente officiis, explicabo fugiat ipsam laborum dolorum culpa voluptatum dolore, repellendus, aspernatur autem amet doloribus eos exercitationem saepe perspiciatis molestias!</p>
    </div>
    <div class="reg__desc" style="display: none;">
      <p>22Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Consectetur ex sapiente officiis, explicabo fugiat ipsam laborum dolorum culpa voluptatum dolore, repellendus, aspernatur autem amet doloribus eos exercitationem saepe perspiciatis molestias!</p>
    </div>
  </div>
</div>

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

2
  • Уточните, пожалуйста, про какой border идёт речь. ИМХО в предложенном коде всё выглядит весьма достойно.
    – 7-zete-7
    28 дек 2021 в 9:52
  • @7-zete-7, показала стрелкой 28 дек 2021 в 9:55

1 ответ 1

2

Когда в градиенте делаете смещение на 2px .reg__elem.reg__elem--active:not(:first-child)::before, .reg__elem.reg__elem--active:not(:last-child)::after то и делаете смещение и во втором параметре цвета

Поправил - должно работать

$(document).on('click', '.reg__box', function() {
    $(".reg__elem").removeClass("reg__elem--active");
    $(this).parents(".reg__elem").addClass("reg__elem--active");
    var index = $(this).parents(".reg__elem").index();
    console.log(index);
    $(".reg__desc").hide(0).eq(index).fadeIn(0);
  })
.reg__tabs {
    --tab-background: #f7fafc;
    --tab-text-color: #fff8f8;
    --tab-radius: 24px;
    --tab-padding: 20px;
    width: calc(100% + 24px);
    margin-left: -12px;
}

.reg__head {
    display: flex;
    flex-wrap: wrap;
}

.reg__elem {
    width: 50%;
    padding-top: 12px;
    padding-right: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-self: end;
    width: 50%;
    border-radius: var(--tab-radius) var(--tab-radius) 0 0;
}

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

.reg__elem.reg__elem--active {
    background-color: var(--tab-background);
}

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

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

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

.reg__desc:first-child {
    border-radius: 0 var(--tab-radius) var(--tab-radius) var(--tab-radius);
}

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

.reg__box {
    cursor: pointer;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #e9e8f4;
    border-radius: 15px;
    background-color: #fff;
    margin-left: 12px;
    margin-bottom: 24px;
}

.reg__icon {
    display: block;
    width: 38px;
    height: 38px;
}

.reg__icon img {
    display: block;
}

.reg__content {
    display: block;
    width: calc(100% - 38px);
    padding-left: 16px;
    padding-right: 45px;
    pointer-events: none;
}

.reg__change,
.reg__time,
.reg__text {
    display: block;
}

.reg__input {
    display: none;
}

.reg__input:checked + label:after {
    border: 4px solid #3453f3;
}

.reg__label {
    cursor: pointer;
    display: flex;
    width: 100%;
    align-items: center;
    padding: 15px 20px;
    padding-right: 10px;
}

.reg__label:after {
    position: absolute;
    content: ' ';
    top: 50%;
    transform: translateY(-50%);
    right: 18px;
    width: 18px;
    height: 18px;
    border: 1px solid #e9e8f4;
    border-radius: 20px;
}

*{box-sizing: border-box;}

body {
  padding: 20px;
}
<div class="reg__tabs">
  <div class="reg__head">
    <div class="reg__elem reg__elem--active">
      <div class="reg__box">
        <input type="radio" checked="" id="r_courier" class="reg__input" name="delivery">
        <label for="r_courier" class="reg__label">
          <span class="reg__icon">
            <img src="img/order/delivery_courier.svg" alt="">
          </span>
          <span class="reg__content">
            <span class="reg__change">title 1</span>
            <span class="reg__time">c 09:00 до 20:00</span>
            <span class="reg__text">text 1</span>
          </span>
        </label>

      </div>
    </div>
    <div class="reg__elem">
      <div class="reg__box">
        <input type="radio" id="r_nova" class="reg__input" name="delivery">
        <label for="r_nova" class="reg__label">
          <span class="reg__icon">
            <img src="img/order/nova_poshta.svg" alt="">
          </span>
          <span class="reg__content">
            <span class="reg__change">Доставка</span>
            <span class="reg__time">1 - 3 дня</span>
            <span class="reg__text">text2</span>
          </span>
        </label>
      </div>
    </div>
  </div>
  <!--end reg__holder-->
  <div class="reg__body">
    <div class="reg__desc" style="">
      <p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Consectetur ex sapiente officiis, explicabo fugiat ipsam laborum dolorum culpa voluptatum dolore, repellendus, aspernatur autem amet doloribus eos exercitationem saepe perspiciatis molestias!</p>
    </div>
    <div class="reg__desc" style="display: none;">
      <p>22Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Consectetur ex sapiente officiis, explicabo fugiat ipsam laborum dolorum culpa voluptatum dolore, repellendus, aspernatur autem amet doloribus eos exercitationem saepe perspiciatis molestias!</p>
    </div>
  </div>
</div>

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

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.