Как добавить границу в мой клип-путь: 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; } } 
  • text-overflow: многоточие в Firefox 4? (и FF5)
  • Преобразование CSS3, влияющее на другие элементы с хромом / safari
  • tags header / footer / nav - что происходит с ними в IE7, IE8 и браузерах, чем не поддерживают HTML5?
  • Вложенные правила @media в CSS
  • CSS3 Анимация и отображение Нет
  • 'transform3d' не работает с позицией: фиксированные дети
  • фон-размер в сокращенном фон-фон (CSS3)
  • Границы gradleиента CSS3
  • css селектор для соответствия элементу без атрибута x
  • Как создать импульсный эффект с использованием -webkit-animation - наружные кольца
  • Есть ли такая вещь, как селектор CSS «all inclusive sibling»?
  • Interesting Posts

    Есть ли способ открыть закладку на боковой панели в Firefox, не нажимая на закладку в панели закладок?

    Изучение теории сбора мусора

    Как шифровать String в Java

    Excel Interop – эффективность и производительность

    Как получить bash для автоматического обновления кеша местоположений программ?

    Как сделать бесконечную анимацию jquery?

    Почему регистратор ARM PC указывает на инструкцию после следующего запуска?

    Как запустить PowerShell с помощью среды выполнения .NET 4?

    API сокетов Java. Как узнать, было ли соединение закрыто?

    Есть ли лучшая альтернатива этому, чтобы «включить тип»?

    Что такое контекст Scala и границы обзора?

    Как немедленно завершить блокировку streamа при операции ввода-вывода сокета?

    Группировать по и суммировать объекты, как в SQL с Java lambdas?

    Каковы различия между utf8_general_ci и utf8_unicode_ci?

    Как позволить утилите `man` использовать` less` для отображения руководства, а не `more`?

    Давайте будем гением компьютера.