xandeadx.ru Блог музицирующего веб-девелопера

CSS → Прозрачный треугольный вырез в элементе

Опубликовано в

Для создания вырезов в css есть свойство clip-path, позволяющее ограничить область элемента любой геометрической фигурой или полигоном. Работает во всех современных браузерах кроме IE (caniuse).

Пример треугольного выреза в активном пункте меню:

<ul class="menu">
  <li class="menu__item">Item One</li>
  <li class="menu__item menu__item--active">Item Two</li>
  <li class="menu__item">Item Three</li>
</ul>
.menu__item {
  float: left;
  margin: 0 0 0 0.1em;
  padding: 1em 1.5em;
  background: #408080;
  color: white;
}
.menu__item--active {
  background: #2E5C5C;
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(50% + 10px) 100%,
    50% calc(100% - 10px),
    calc(50% - 10px) 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(50% + 6px) 100%,
    50% calc(100% - 6px),
    calc(50% - 6px) 100%,
    0 100%
  );
}

Демо

Похожие записи

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании