интересно! Схема генерации неправильной границы

В этой статье будет представлена небольшая техника добавления границ к различным неправильным формам с помощью фильтров SVG.

Для полной DEMO этой статьи, вы можете нажать здесь:Transparent создает неправильные границы с фильтром SVG feMorphology

Требуется фон, добавление границ к неправильной графике

В нашем повседневном развитии продолжительность будет сталкиваться с некоторыми непрямоугольными и некруглыми паттернами. Похожие на эти:

Используя чистые CSS, сопоставьте несколько советов, можно сделать вышеуказанную графику, конечно, это только первый шаг по требованию.

Сразу после этого может появиться запрос на добавление рамки к приведенной выше графике, в это время CSS сделать сложно.

попробуй использовать`drop-shadow`добавить границу

Первый метод, мы можем попробовать использоватьdrop-shadow, чтобы добавить внешнюю тень к неправильным формам.

Один из способов, которым мы можем легко реализовать это с помощью CSS, используя в качестве примера графику со стрелкой, выглядит следующим образом:

<div class="arrow-button"></div>

.arrow-button {
    position: relative;
    width: 180px;
    height: 64px;
    background: #f49714;

    &::after {
        content: "";
        position: absolute;
        width: 32px;
        height: 64px;
        top: 0;
        right: -32px;
        background: 
            linear-gradient(-45deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%),
            linear-gradient(-135deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%);
        background-size: 32px 32px;
        background-repeat: no-repeat;
        background-position: 0 bottom, 0 top;
    }
}

Давая.arrow-buttonдобавить одинdrop-shadow, вы можете добавить тень к неправильной форме, эффект будет следующим:

.arrow-button {
    ...
    filter: drop-shadow(0px 0px 2px #000);
    ...
}

`drop-shadow`Ограничения программы

использоватьdrop-shadowОграничение схемы в том, чтоdrop-shadowТени могут быть созданы только для нерегулярной графики, а эффекты границ без размытия не могут быть созданы.

Добавьте приведенный выше рисунокdrop-shadowЭффект выглядит следующим образом, что все еще немного хуже, чем сущность, которую мы хотим, без размытой границы:

Используйте SVG`feMorphology`фильтр добавить границу

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

CSS также имеет возможность увеличивать элементы.transform: scale(), но код для реализации оригинальной графики может быть очень сложным, и наложение другого может быть не очень элегантно, поэтому нам нужно найти другой способ найти другие подобные реализации.

Здесь мы пытаемся использовать SVGfeMorphologyФильтр для добавления границ к неправильным формам.

Если вы мало знаете о фильтрах SVG, вы можете просто взглянуть на эту статью о моем начале работы:интересно! Мощные фильтры SVG

Краткое введениеfeMorphologyфильтр

феМорфологический фильтр

Бедрофология - это морфологический фильтр, входной источник которого обычно является альфа-каналом графики. Его две операции могут разрушить (разбавить) или расширять (смелый) источник.

использовать атрибутoperatorОпределяет, хотите ли вы эффект коррозии или эффект расширения. использовать атрибутradiusУказывает на степень эффекта, который можно понимать как размер штриха.

оператор:erodeрежим коррозии,dilateэто режим расширения, по умолчаниюerode
радиус: размер обводки, принимает число, обозначающее степень эффекта в этом режиме, по умолчанию 0

Давайте просто применим этот фильтр к тексту, чтобы увидеть эффект:

<div class="g-text">
    <p>Normal Text</p>
    <p class="dilate">Normal Text</p>
    <p class="erode">Normal Text</p>
</div>

<svg width="0" height="0">
    <filter id="dilate">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="3"></feMorphology>
    </filter>
    <filter id="erode">
        <feMorphology in="SourceAlpha" result="ERODE" operator="erode" radius="1"></feMorphology>
    </filter>
</svg>

p {
    font-size: 64px;
}
.dilate {
    filter: url(#dilate);
}
.erode {
    filter: url(#erode);
}

Эффект выглядит следующим образом: крайний левый — обычный текст, средний — режим расширения, а правый — режим коррозии, посмотрите на эффект, его очень легко понять:

занимать`feMorphology`Возможность расширения добавления границ к неправильным формам

использоватьfeMorphologyвозможность расширения, мы можем заранее подготовить SVGfeMorphologyФильтр, его роль, как указано выше:

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

И фильтры SVG можно легко вводить в различную графику через режим URL-адреса CSS-фильтра, и возможность повторного использования очень высока.

Простой код для этого фильтра выглядит следующим образом:

<svg width="0" height="0">
    <filter id="outline">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology>
        <feMerge>
            <feMergeNode in="DILATED" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
</svg>

Кратко проанализируйте этот код фильтра SVG:

<feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology>Непрозрачная часть исходного изображения используется в качестве входных данных, используяdilateспособ расширения и степень radius="1", в результате чего черная плитка на 1 пиксель больше исходной.
использоватьfeMergeНаложите черный блок на исходное изображение

Мы по-прежнему даем выше.arrow-buttonДобавьте фильтр CSSfilter: url(#outline), импортируйте созданный нами фильтр SVG:

.arrow-button {
    ...
    filter: url(#outline);
    ...
}

url — одно из ключевых слов свойств фильтра CSS,urlШаблоны — это одна из возможностей, предоставляемых фильтрами CSS, позволяющая нам вводить специальные фильтры SVG, которые значительно расширяют возможности фильтров в CSS.

Взгляните на эффект:

Вау, в этот раз получилось, проходитеfeMorphologyфильтр, мы успешно добавили эффект границы к неправильной графике, я могу управлять фильтром,radius="1"контролировать размер границы.

Затем примените вышеуказанные фильтры к различным неправильным формам, чтобы увидеть эффект:

Эффект в порядке, то есть цвет черный. Если мы хотим, чтобы цвет границы был другого цвета, есть ли способ?

дополненный`feFlood`а также`feComposite`изменить цвет границы

пройти черезfeFloodа такжеfeCompositeДва фильтра SVG, которые могут придавать разные цвета сгенерированным плиткам, коды следующие:

<svg width="0" height="0">
    <filter id="outline">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology>

        <feFlood flood-color="green" flood-opacity="1" result="flood"></feFlood>
        <feComposite in="flood" in2="DILATED" operator="in" result="OUTLINE"></feComposite>

        <feMerge>
            <feMergeNode in="OUTLINE" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
</svg>

пройти черезfeFlood серединаflood-color="green", вы можете управлять цветом сгенерированной границы (плитки), который здесь установлен на зеленый. Эффект, применяемый к каждому графику, выглядит следующим образом:

До сих пор мы реализовали добавление границ разных цветов к нерегулярной графике через фильтры SVG.

Для полной ДЕМО вы можете нажать здесь:Transparent создает неправильные границы с фильтром SVG feMorphology

В заключение

Кратко резюмируя:

использоватьdrop-shadowВы можете добавить тени к нерегулярной графике, но вы не можете реализовать это для нестандартной графики, добавляя объекты без размытых границ.
использоватьfeMorphologyФильтры SVG могут добавлять эффекты границ к неправильной графике, контролируя radius="1"Регулируемый размер границы
использоватьfeMorphologyдополненныйfeFloodа такжеfeCompositeфильтр для изменения цвета границы
С помощью режима URL-адреса CSS-фильтра вы можете быстро вводить фильтры SVG в элементы HTML, такие какfilter: url(#outline)

Стоит отметить, что поскольку графика не 1:1 по высоте и ширине, аfeMorphologyизdilateРежим не будет расширяться пропорционально высоте и ширине элемента, поэтому генерируемая граница не обязательно везде равномерна и одинакова, иfeMorphologyизradiusАтрибут может передавать два значения, разделенные пробелами, соответственно указывающие размеры расширения по горизонтали и вертикали, которые можно точно настроить при фактическом использовании.

наконец

Эта статья больше посвящена тому, чтобы дать представление о создании неправильной границы.Конечно, большинство конкретных ситуаций по-прежнему будут основаны на разрезании изображения, но неплохо узнать больше о возможном метод.

Ну вот и подошла к концу эта статья, простая маленькая хитрость, надеюсь она вам поможет :)

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

Требуется фон, добавление границ к неправильной графике

попробуй использоватьdrop-shadowдобавить границу

drop-shadowОграничения программы

Используйте SVGfeMorphologyфильтр добавить границу