Блог

Я пытаюсь преобразовать макет дизайна в 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 поверх другой, но когда я увеличиваю масштаб, иногда он отображается в виде двух строк :/

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

 .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> 

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

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