CSS, jQuery - принудительный клип в IE

Question

У меня мало проблем с клипом (я знаю, что IE не поддерживает это). Я нашел несколько решений для изображения клипа, но это не так - мне нужно сделать это со всей секцией.

Но может быть, есть другое решение? В основном мне нужна форма:

Розовая область - это конец первой секции, а серая - в следующем разделе. (Я достиг этой формы с клипом, но, к сожалению, она не работает в IE).

Возможно, есть какое-то решение для использования jQuery для принудительного клипа в IE? Я открыт для всех sugestions :)

Thnx за помощью!

Answer 1

Вы не можете заставить браузер использовать функциональные возможности, которые он не поддерживает. Однако можно воспроизвести то, что вам нужно, но по-другому, используя пару div, больших границ и трансформировать.

.border { 
 
    position: relative; 
 
    width: 600px; 
 
    height: 300px; 
 
    overflow: hidden; /* hide borders */ 
 
} 
 

 
.line { 
 
    border-top: 500px solid #f6c; /* Fill top with pink */ 
 
    border-bottom: 500px solid #ccc; /* Fill bottom with grey */ 
 
    width: 1000px; /* Overflow the container so borders fill space */ 
 
    height: 10px; /* White line height */ 
 
    background-color: #fff; 
 
    position: absolute; 
 
    top: -350px; /* Border top height, minus position relative to border */ 
 
    left: -200px; /* hang off the edge so borders fill space */ 
 
    transform: rotate(-2deg); /* Rotate white line */ 
 
}

<div class="border"> 
 
    <div class="line"></div> 
 
</div>

Мы получаем эффект, подобный тому, что вы хотите, которые должны работать в IE9 и выше. Я знаю, что это не совсем то, что вам нужно, но похоже, что он достиг того же результата и, возможно, полезен.