<Фигура> CSS

Тип данных <basic-shape> (от англ. basic shape — базовая фигура) CSS представляет собой форму, используемую в свойствах клипа или формы.

Наследуется:
Нет
Анимируется:
Нет
Спецификации:

Синтаксис

inset( <shape-arg>{1,4} [round <border-radius>]? )
circle( [<shape-radius>]? [at <position>]? )
ellipse( [<shape-radius>{2}]? [at <position>]? )
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

Примеры

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background: linear-gradient(red, blue);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: 5s poly infinite alternate ease-in-out;
  margin: 1em auto;
  display: block;
}

@keyframes poly {
  from {
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }

  to {
    -webkit-clip-path: polygon(44% 26%, 58% 38%, 58% 38%, 44% 81%, 44% 81%, 25% 49%);
    clip-path: polygon(44% 26%, 58% 38%, 58% 38%, 44% 81%, 44% 81%, 25% 49%);
  }
}