Итак, у меня сложная схема, которая вызывает у меня головную боль.
Я поместил несколько треугольников (используя svg polygon), и они, кажется, отлично работают в Chrome, но немного ошиблись в Edge & Firefox. Я пытался использовать border и box-shadow, чтобы скрыть его, но это не похоже помочь.
Есть ли способ скрыть белые пробелы? (на серой, оранжевой и синей частях) (если вы их сначала не видите - попробуйте немного изменить размер окна, и оно в какой-то момент защелкнется)
@ update2: установка границ для вспомогательного div на данный момент выглядит как обходной путь
Я также пытался использовать один CSS clip-path с многоугольником, который имеет форму трапеции, но широко не поддерживается. Другая вещь, которую я попробовал, - это использовать css transform skew(), но я обнаружил, что правильно позиционировать затруднительно, поскольку следующие разделы должны перемещаться соответственно в сторону, чтобы соответствовать степени перекоса.
Если вы, по крайней мере, думаете, что есть лучшее решение, чтобы сделать это, пожалуйста, дайте мне подсказку, и я попробую.
<ч />
Вот код для версии с svg треугольниками:
А для clip-path версии:
И skew версия:
@ edit1
Я обнаружил, что установка градиента может помочь, но он просачивается в угол ...
background: linear-gradient(left,
rgb(253, 96, 64) 0%
rgba(255,255,255,0.8) 8px,
rgba(255,255,255,0) 100%)
@ edit2
Изменение соседнего с треугольником div на:
border-right: 1px solid rgb(253, 96, 64);
position: relative;
margin-right: -1px;
кажется хорошим решением. Я обновил его в песочнице.