Как создать такие скошенные углы [дубликат]

352

29 апреля 2017, 20:51

На данный вопрос уже ответили:

Кривая граница элемента 5 ответов

Здравствуйте как создать такие скошенные углы при помощи svg ?

Answer 1

Как заставить работать clip-path в Firefox - всё точно также, только координаты полигона другие.
Начало - левый, верхний угол - 0,0
Далее правый верхний угол - 1,0
Верт. вниз --1,0.1
Скос до середины - 0.5, 0.2
Скос от середины - 0,0.1

 <polygon points="0,0  1,0  1,0.1  0.5, 0.2 0,0.1"></polygon>

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="200" viewBox="0 0 800 200" > 
 
  <defs> 
<clipPath id="clip-ff" clipPathUnits="objectBoundingBox"> 
  <polygon points="0,0  1,0  1,0.1  0.5, 0.2 0,0.1"></polygon> 
</clipPath> 
  </defs> 
  <image xlink:href="http://placeimg.com/800/800/any" clip-path="url(#clip-ff)" width="800" height="800"> </image> 
</svg>

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

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

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

XML внутри HTML

Можно ли внутри html тега вывести каким то образом XML, то есть чтобы браузер не распозновал это как HTML и пытался его вывести а именно как XMLОчень...

479

HTML