Как добавить границу в мой клип-путь: polygon (); Стиль CSS

Я хочу знать, можно ли добавить border в мой clip-path:polygon(); стиль или любой другой способ добавить границу?

например: border:5px solid red;

CSS

 .poligon { display: inline-block; position:relative; width:150px; height:150px; background: black; box-sizing:border-box; padding:55px; } .poligon img { display: inline-block; border:5px solid red; width:150px; height:150px; -webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%); -moz-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%); } 

HTML

 

Может ли граница применяться к обрезаемому элементу вдоль пути клипа?

Нет, добавление свойства border к обрезаемому элементу не будет применять границы вдоль обрезанного пути, потому что border применяется к исходному прямоугольному (или квадратному) контейнеру до того, как будет применен clip-path и поэтому он также будет вырезаться. Вы можете увидеть это в следующем fragmentе:

 div { display: inline-block; height: 200px; width: 200px; border: 3px solid; background: darkseagreen; } div + div { -webkit-clip-path: polygon(50% 0%, 100% 100%, 100% 0%); } 
 

Добавление границы в сложный путь клипа с фильтром расширения SVG

Метод сжимания копии работает только в простых случаях – используется в принятом в настоящее время ответе

В настоящее время принятый ответ работает, делая копию и сокращая ее. Это работает для примера, но если у вас более сложная форма (например, текст), это не сработает. Лучше использовать дилатацию с фильтром.

Формальная дилатация работает на ЛЮБОЙ форме

Лучше всего использовать дилатацию с фильтром feMorphology !!

  • Фильтр SVG feMorphology

Ключевые аспекты:

  • Создайте соответствующие формы и одинаковой высоты и ширины
  • Закрепите оба с желаемым контуром фигуры / полигоном
  • Используйте фильтр для расширения / увеличения обрезанного rect чтобы сделать границу

radius= фильтра radius= становится стойкой для толщины границы.

Результат:

введите описание изображения здесь

 .clipper{ clip-path: url(#clip_shape); } .dilate{ filter: url("#dilate_shape"); } 
     M              

Псевдо-элемент

Хорошим способом сделать это было бы с псевдоэлементом вроде :before

Сделайте точно такую ​​же форму, но немного меньше, которая содержит основной цвет, который вы хотите, и правильно позиционируете, и вы получите нужную вам границу.

Ниже приведен пример неправильной формы, но показывает, как добиться этого эффекта:

 .shape { width: 400px; height: 40px; background-color: black; -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); position: relative; } .shape:before { content: ''; width: 398px; height: 38px; -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); background: green; display: block; position: absolute; top: 1px; left: 1px; } 
 

У меня есть другое решение.

Это то, над чем я работаю: введите описание изображения здесь

 .top-angle-left { -webkit-clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%); position: relative; } .top-angle-left:after { -webkit-clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%); clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%); background: #e99d15; content: ''; position: absolute; left: 0; top: -82%; right: 0; height: 100%; display: block; z-index: 9; } 

Идея о том, что элемент: after может ВСЕГДА масштабироваться с его родительским контейнером, так что теперь это на 100% отзывчиво. Это достигается только путем применения отрицательной вершины к элементу: after. Надеюсь, это полезно!

Вот как это сделать.

 

Просто добавьте дубликат маски и добавьте дополнение к родительскому элементу.

 .screenshot { mask: url(../assets/img/bubble.svg) center center no-repeat; background: white; padding: 10px; img { mask: url(../assets/img/bubble.svg) center center no-repeat; } } 
  • т. е. пограничный радиус
  • На странице начальной загрузки, как центрировать div
  • Скрыть Показать список содержимого только с CSS, не используется javascript
  • firefox overflow-y не работает с вложенным flexbox
  • Встроенный блок отображения CSS-центра?
  • Могу ли я настроить таргетинг на: перед или: после псевдоэлемента с помощью сочетания братьев и сестер?
  • Сделать шрифты Adobe работать с CSS3 @ font-face в IE9
  • Что такое этот селектор CSS?
  • Эффект Hover: расширение нижней границы
  • Почему порядок запросов в СМИ имеет значение в CSS?
  • Эффект блочного gradleиента в CSS3
  • Давайте будем гением компьютера.