Не работает clip-path в IE 11.0.120

230

05 февраля 2020, 18:20

Всем привет!
Много гуглил, пробовал. Не работает clip-path, не могу разобраться почему.
Ниже прилагаю код, который воспроизводит мою проблему. Подскажите, пожалуйста, что я не так делаю? В Google Chrome всё хорошо. В Firefox тоже всё хорошо. В IE 11 и Edge вообще не работает.

.child { 
	width: 100px; 
	height: 20px; 
	background: limegreen; 
	clip-path: url("#clipping"); 
	display: inline-block; 
	margin: 0 10px; 
}

<div> 
	<div class="child"></div> 
	<div class="child"></div> 
	<svg width="0" height="0"> 
		<defs> 
			<clipPath id="clipping" clipPathUnits="objectBoundingBox"> 
				<polygon points="0 0,.8 0,1 1,.2 1"></polygon> 
			</clipPath> 
		</defs> 
	</svg> 
</div>

Всем, заранее, спасибо за предложенные варианты решения этой проблемы!

Answer 1

Вот вариант без обрезок

.skew { 
    width: 250px; 
    height: 30px; 
    margin: 0 0 5px 20px; 
    border: 1px solid black; 
    overflow: hidden; 
} 
 
.skew.left, .skew.right div { 
   transform: skewX(25deg); 
} 
 
.skew.right, .skew.left div { 
    transform: skewX(-25deg); 
} 
 
.skew div { 
  margin-left: -10%; 
  width: 120%; 
  height: 100%; 
  background-color:wheat; 
  text-align:center; 
  line-height:30px; 
}

<div class="skew left"> 
   <div>123456</div> 
</div> 
<div class="skew right"> 
   <div>654321</div> 
</div>

Answer 2

В комментариях уже ответили, что clip-path в IE не работает

https://caniuse.com/#search=clip-path

Answer 3

На svg clip-path работает везде ...

<svg version="1.1" viewBox="0 0 229 71" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 <defs> 
  <clipPath id="clipPath833"> 
   <path d="m-135 63h175l54 38-54 33h-175z" style="fill:#00ff00;paint-order:markers fill stroke"/> 
  </clipPath> 
 </defs> 
 <g transform="translate(135 -63)"> 
  <image x="-135" y="8" width="329" height="213" clip-path="url(#clipPath833)" style="image-rendering:optimizeQuality" preserveAspectRatio="none" xlink:href="https://i.stack.imgur.com/qQKDK.jpg"/> 
 </g> 
</svg>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Мета-тег “Viewport”

Скажите пожалуйста, возможно ли без мета-тега "Viewport" сделать сайт адаптивным(задавая медиа-запросы)? Спасибо

276

c++

Ошибка в работе с библиотекой gumbo

Полностью скопировал код с официальной странички с гитхаба - https://githubcom/google/gumbo-parser#basic-usage Единственное что поменял это #include "gumbo

207

c++

Задан текст, в котором входят только цифры и буквы. Определить, является ли этот текст десятичной записью числа, кратного 4?

Собственно трудность для меня состоит в том, что бы запихнуть в проверку слово состоящее только из цифр, то есть необходимо создать некий...

432

c++

Быстрая сортировка двусвязного списка

Есть структура двусвязного списка с данными:

202