Почему в каждом втором параллелограмме есть пробел?
Вопрос в названии.
Вот рабочий пример: https://jsfiddle.net/ms89adx4/1/
Вот код:
body {
font-size: 0;
margin: 0;
}
.button {
height: 100px;
background-color: red;
width: 85px;
transform: skew(20deg);
position: relative;
display: inline-block;
}<body>
<div class = "button"></div>
<div class = "button"></div>
<div class = "button"></div>
<div class = "button"></div>
<div class = "button"></div>
<div class = "button"></div>
</body>Я хочу, чтобы не было пробела каждый второй div. Я мог бы просто сделать margin-left: -0.5px;, но я думаю, что это плохое решение этой проблемы.
О каком пространстве вы говорите? Можете ли вы выделить это с помощью изображения, пожалуйста?
@Aditya Aditya Я добавил изображение.
Возможным обходным путем было бы использование псевдо, например. .button::before { content: " "; left:-1px; top:0; right:-1px; bottom:0; background-color:red; position:absolute; }
какая у тебя цель? макет, который вы хотите получить. Есть много способов визуально получить то, что вы хотите
Я не «проверял» ответ Алекса, потому что его решение работало только в том случае, если сайт отображается в масштабе по умолчанию, но для меня это достаточно хорошее решение. Моя проблема была решена, но теперь я ищу ответ, который решает реальную проблему, а не только визуально.
Ответы 2
Проблема здесь, кажется, в ширине параллелограмма, иногда определенная ширина может показывать пространство между элементами div.
Попробуйте изменить:
width: 85px;
К
width: 86px;
Обычно нечетные числа показывают пробел между элементами div. Старайтесь всегда использовать четное число при выборе ширины элемента.
Это устраняет проблему, когда сайт отображается на 100%. Когда вы уменьшите масштаб до 70%, вы все равно будете видеть пробел через каждые 2-е или 3-е деление. Хотя, это достаточно хорошее решение для меня. Спасибо! :)
Неправильный ответ. В другом веб-браузере с другим разрешением проблема появится снова, поэтому @Krøsh, не используйте это как решение.
Вы можете использовать margin-left: -1px;, и это должно сработать
ОП уже предположил в вопросе, что отрицательная маржа может это исправить.
Можно добавить небольшую схему:
.container {
font-size: 0;
margin: 0;
}
.button {
height: 100px;
background-color: red;
width: 85px;
display: inline-block;
position: relative;
transform: skew(20deg);
outline:0.1px solid red;
}<div class = "container">
<div class = "button"></div>
<div class = "button"></div>
<div class = "button"></div>
<div class = "button"></div>
<div class = "button"></div>
<div class = "button"></div>
</div>
проблема с субпиксельным рендерингом. Я вижу пробелы между всеми ними (измените уровень масштабирования, и он будет другим)