Search the Community

Здравствуйте, подскажите пути решения такой вот задачи: Адаптивный дизайн, родительский блок сделал с помощью clip-path:polygon, но у внутренних блоков есть border:2px поэтому clip-path не подходит. Подскажите, как правильнее это сверстать?

Здравствуйте. Прошу помочь в решении следующей задачи: Имеется родительский элемент со свойством clip-path и дочерний элемент с анимацией: Для примера: HTML <div id="logoimage-waves"> <div id="waves-animated"></div> </div> <svg> <clipPath id="WavesPolygon"> <polygon points="0 0,95 0,95 8,80 5,60 10,40 15,20 20"> </polygon> </clipPath> </svg> CSS #logoimage-waves { width: 100px; height: 100px; clip-path: url("#WavesPolygon"); -webkit-clip-path: polygon(0px 0px,95px 0px,95px 8px,80px 5px,60px 10px,40px 15px,20px 20px); position: absolute; } #waves-animated { width: 100px; height: 100px; position: absolute; background: url(/images/waves.png) no-repeat; animation: waves-animation 40s; } @keyframes waves-animation { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } } Вопрос следующий: В Firefox всё работает как надо, дочерний анимированный элемент обрезается с помощью свойства clip-path родительского элемента. Но в других браузерах (проверял в Chrome 55 и Opera 41) обрезка не работает и элемент показывается полностью. Причём, что важно, это происходит только в том случае, если дочерний элемент анимирован с помощью свойства transform, а если анимируется другое свойство, например margin, то обрезка работает во всех браузерах. Короче говоря: дочерние элементы анимированные с помощью transform не обрезаются с помощью clip-path родительского элемента в Хроме и Опере. В общем задачка та еще. Второй день пытаюсь решить ) Благодарю за внимание!

Как решить вопрос с кроссбраузерностью таких вещей? В firefox буквы "D" (маски) нету и clip-path не отрисовывается на сером блоке. А в IE - полная грусть. А это разметка

Нужна помощь! Начал разбираться со свойством 'clip-path'. Оно пока мало поддерживается браузерами. Полноценно только -webkit-браузерами. Поддержка Firefox имеется, но только через "external-link" - clip-path: url(#foo) и описании svg в html. У меня возникла проблема реализации именно последним способом: Вот реализация через clip-path в css (работает только на -webkit-): Захотел сделать тоже самое только через external-link для поддержки Firefox, описал те же polygon в svg и меня ничего не работает, в чем именно я допустил ошибку? Знаю, что будут проблемы с transition со второй реализацией, но это лучше чем ничего! Заранее спасибо за помощь!