Как убрать границы у блоков с определённых сторон?

Рейтинг: 4Ответов: 2Опубликовано: 18.05.2023

Как убрать границу в некоторых местах? В местах скругления границы расходятся:

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

Также нужно продлить верхнюю границу первого элемента:

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

.company-items {
  margin: 0 100px;
}

.company-items-container {}

.company-item {
  border-radius: 15px;
  border: 1px solid #C4D0D9;
}

.company-item:nth-child(odd) {
  border-radius: 10px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border: 1px solid #C4D0D9;
  border-right: 0;
}

.company-item:nth-child(even) {
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border: 1px solid #C4D0D9;
  border-left: 0;
}

.company-item-container {
  display: flex;
}

.company-subtitle {
  display: flex;
  align-items: center;
  vertical-align: middle;
  font-family: 'Sreda';
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  color: #FFFFFF;
}

.company-icon {
  display: none;
}

.company-text {
  width: 420px;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  color: #FFFFFF;
}

.company-text,
.company-subtitle {
  margin: 115px 150px;
}
<div class="company-items">
  <div class="company-items-container">
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>

  </div>
</div>

css
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

Добавляем блокам псевдоэлементы. Проверяем чётность блоков и, на основе этого, задаём различные стили псевдоэлементам. По такому же принципу, добавляем линии в начале и конце секции (не забудьте про body {overflow: hidden auto;}, чтобы не появлялась горизонтальная полоса прокрутки).

Пара дополнительных правил для ::after добавлены на тот случай, если количество блоков заранее неизвестно или может измениться - тогда заключительная линия автоматически займёт нужное положение.

body {
  overflow: hidden auto;
  background-color: #3b3b3d;
}

.company-items { margin: 0 100px; }

.company-items-container {}

.company-item {
  position: relative;
  border-top: 1px solid #90989e;
}
/* Закругления блоков */
.company-item::before {
  content: '';
  position: absolute;
  top: -1px;
  display: block;
  height: 100%;
  width: 10px;
  border: 1px solid #90989e;
}
.company-item:nth-child(odd)::before {
  right: 100%; border-right: none;
  border-radius: 10px 0 0 10px;
}
.company-item:nth-child(even)::before {
  left: 100%; border-left: none;
  border-radius: 0 10px 10px 0;
}
/* Концы блоков */
.company-item::after {
  content: '';
  position: absolute;
  display: block;
  height: 0;
  border-top: 1px solid #90989e;
}
.company-item:first-child::after {
  top: -1px; left: 100%; width: 100vw;
}
.company-item:nth-child(odd):last-child::after {
  top: 100%; left: 0; width: 100vw;
}
.company-item:nth-child(even):last-child::after {
  top: 100%; right: 0; width: 100vw;
}

.company-item-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}
.company-item:nth-child(even) .company-item-container {
  flex-direction: row-reverse;
}

.company-subtitle {
  display: grid;
  place-items: center;
  font: normal 400 36px/1em "Sreda";
  color: #fff;
}

.company-icon { display: none; }

.company-text {
  width: 420px;
  font: normal 400 18px/1.5em "Poppins";
  color: #fff;
}
<div class="company-items">
  <div class="company-items-container">
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Dynamic Management</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Development Modeling</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
  </div>
</div>

▲ 1

Можно просто через clip-path порезать лишнее (в принципе, можно резать и точнее, но если нужен фон, то проще в ::before вынести):

main {
  width: 70%;
  margin: 2em auto 4em;
}

#bg:checked ~ main section {
  background: antiquewhite;
}

section {
  --r: 1em;

  border: 1px solid blue;
  min-height: 3em;
  border-radius: var(--r);
  padding: 0 var(--r);
  
  --rtc: 0em;
  --rbc: 0em;
  --ltc: 0em;
  --lbc: 0em;

  clip-path: polygon(
    var(--ltc) 0,
    calc(100% - var(--rtc)) 0,
    calc(100% - var(--rbc)) 100%,
    var(--lbc) 100%
  );
}

section + section {
  margin-top: -1px;
}

section:nth-child(odd) {
  border-color: blue transparent blue blue;
  --rtc: var(--r);
  --rbc: var(--r);
}

section:nth-child(even) {
  border-color: blue blue blue transparent;
  --ltc: var(--r);
  --lbc: var(--r);
}

section:first-child {
  border-top-right-radius: 0;
  --rtc: 0em;
}

section:nth-child(odd):last-child {
  border-bottom-right-radius: 0;
  --rbc: 0em;
}

section:nth-child(even):last-child {
  border-bottom-left-radius: 0;
  --lbc: 0em;
}
<input type=checkbox id=bg><label for=bg>Показать обрезку</label>

<main>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</main>

<main>
  <section></section>
  <section></section>
  <section></section>
</main>

<main>
  <section></section>
</main>

<main>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</main>