<Фигура> CSS

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

Тип данных **`<basic-shape>`** *(от англ. **basic** **shape** -- базовая фигура)* CSS представляет собой форму, используемую в свойствах клипа или формы.
Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Спецификации:
* [CSS Shapes Module Level 1](https://drafts.csswg.org/css-shapes/#basic-shape-functions)

Синтаксис

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>]# )

Синтаксис

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%);
  }
}

Примеры

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%); } }

Содержание

  • Синтаксис
      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%); } }

    В начало