CSS Как расположить закругленные линии вместе

#html #css #css-position #tailwind-css

Вопрос:

Я пытаюсь преобразовать макет дизайна в actuall css, и я застрял. Это то, чего мне нужно достичь: введите описание изображения здесь

Я создал простую версию, используя tailwind, но это то, что я получил до сих пор, и теперь я застрял, и я не знаю, как избавиться от этого пространства между закругленными границами. Смотрите ниже:

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

https://jsfiddle.net/mwn6rb4t/1/

 <div class="grid grid-cols-3">
  <div class="m-2 h-12 border border-gray-300 rounded-lg"></div>
  <div class="">
    <div class="h-1/2 border-b  border-gray-300"></div>
    <div class="h-1/2 border-l border-gray-300"></div>
  </div>
  <div class="m-2 h-12 border border-gray-300 rounded-lg"></div>
  
  <div></div>
  <div class="">
    <div class="h-1/2 border-b rounded-bl-lg border-l border-gray-300"></div>
    <div class="h-1/2 border-l border-gray-300"></div>
  </div>
  <div class="m-2 h-12 border border-gray-300 rounded-lg"></div>
  
  <div></div>
  <div class="">
    <div class="h-1/2 border-b rounded-bl-lg border-l border-gray-300"></div>
    <div class="h-1/2"></div>
  </div>
  <div class="m-2 h-12 border border-gray-300 rounded-lg"></div>
</div>
 

Я пытался наложить одну границу div поверх другой, но когда я увеличиваю масштаб, иногда он отображается в виде двух строк :/

Комментарии:

1. Стилизованные компоненты, нет способа проверить это … плохое начало.

2. Я добавил версию tailwind

Ответ №1:

Вы можете просто специально выбрать для тех элементов, которые следуют за элементом нижней границы, а затем присвоить ему отрицательный запас вверху, чтобы он перекрывался с элементом над ним:

 .border-b   .h-1/2.border-l {
  margin-top: -8px;
  height: calc(50%   8px);
}
 

Смотрите Пример проверки концепции:

 .border-b   .h-1/2.border-l {
  margin-top: -8px;
  height: calc(50%   8px);
} 
 <link href="https://unpkg.com/tailwindcss@2.2.17/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-3">
  <div class="m-2 h-12 border border-gray-300 rounded-lg"></div>
  <div class="">
    <div class="h-1/2 border-b  border-gray-300"></div>
    <div class="h-1/2 border-l border-gray-300"></div>
  </div>
  <div class="m-2 h-12 border border-gray-300 rounded-lg"></div>
  
  <div></div>
  <div class="">
    <div class="h-1/2 border-b rounded-bl-lg border-l border-gray-300"></div>
    <div class="h-1/2 border-l border-gray-300"></div>
  </div>
  <div class="m-2 h-12 border border-gray-300 rounded-lg"></div>
  
  <div></div>
  <div class="">
    <div class="h-1/2 border-b rounded-bl-lg border-l border-gray-300"></div>
    <div class="h-1/2"></div>
  </div>
  <div class="m-2 h-12 border border-gray-300 rounded-lg"></div>
</div> 

Ответ №2:

Вы используете поля, такие как m-2 на полях

Удалите эти классы для удаления пробелов между полями и используйте margin in negative для перемещения полей второго столбца наверх

Комментарии:

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

2. Да, я понял вашу точку зрения, используйте поле в отрицательном значении, чтобы заполнить пробел закругленной линией

3. Когда я делаю это и увеличиваю масштаб в некоторых масштабах, тогда появляется двойная линия :-/

4. Вы можете мне это показать? так я могу лучше понять

5. Я добавил картинку