Пытаюсь сделать единую границу у нескольких соседних блоков в виде змейки. Если бы углы были прямые, то всё было бы просто. Но углы должны быть скруглённые. Пробую делать так:
div {
width: 190px;
height: 200px;
border: 2px dashed gray;
border-top: none;
}
div:nth-of-type(1) {
border-right: none;
border-radius: 0 0 0 15px;
}
div:nth-of-type(2) {
border-left: none;
border-radius: 0 15px 15px 0;
margin-left: 10px;
}
div:nth-of-type(3) {
border-right: none;
border-radius: 15px 0 0 15px;
}
div:nth-of-type(4) {
border-left: none;
border-radius: 0 15px 15px 0;
margin-left: 10px;
}
Но не некоторых углах стыки явно видны :( Можно ли как-то исправить это? Или, может быть, есть вообще другое решение для подобной задачи?
Ответ
UPD: overflow:hidden; идёт на помощь
Как выяснилось, непрозрачный фон не подходит по условиям задачи. Тогда завернём каждый блок в ещё один и дадим обёрткам свойство overflow:hidden;. Отрицательный верхний маржин уведёт верхнюю границу за пределы обёртки, и обёртка её спрячет.
.snake-border > div {
overflow: hidden;
}
.snake-border > div > div { /* 6. */
width: 190px;
height: 200px;
border: 2px dashed gray;
margin-top: -2px; /* 2. */
}
.snake-border > div:nth-of-type(1) > div {
border-right: none;
border-top: none; /* 1. */
border-radius: 0 0 0 15px;
}
.snake-border > div:nth-of-type(2n+2) > div {
border-left: none;
border-radius: 0 15px 15px 0;
margin-left: 15px; /* 4. */
}
.snake-border > div:nth-of-type(2n+3) > div {
border-right: none;
border-radius: 15px 0 0 15px;
}
.snake-border > div:last-of-type > div { /* 5. */
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
Белый фон делает чёрное дело
Верхнюю границу спрячем только у первого блока. У остальных этого делать не надо, иначе пропадёт часть скругления на углу блока. Приподнимем блоки на ширину границы, чтобы в каждой паре блоков верхняя граница нижнего соседа накладывалась на нижнюю границу верхнего. А чтобы одну из наложившихся границ всё-таки не было видно, назначим блокам непрозрачный фон. (По умолчанию background-clip имеет значение border-box, и фон заползает под границы.) Можно поиграть левым отступом, чтобы пунктир удачнее обрывался на переходах между блоками. Можно сделать, чтобы у последнего блока граница уходила вниз вертикально, — так же, как начинается у первого. И поместим всё внутрь блока с классом, а то даже сниппет добавляет к вёрстке служебные блоки.
.snake-border > div { /* 6. */ width: 190px; height: 200px; border: 2px dashed gray; margin-top: -2px; /* 2. */ background: white; /* 3. */ } .snake-border > div:nth-of-type(1) { border-right: none; border-top: none; /* 1. */ border-radius: 0 0 0 15px; } .snake-border > div:nth-of-type(2n+2) { border-left: none; border-radius: 0 15px 15px 0; margin-left: 15px; /* 4. */ } .snake-border > div:nth-of-type(2n+3) { border-right: none; border-radius: 15px 0 0 15px; } .snake-border > div:last-of-type { /* 5. */ border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
Комментариев нет:
Отправить комментарий