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

12

Я пытаюсь избежать использования фонового изображения (или любого решения на основе изображений) для эффективного создания этого:

нерегулярная граница

Примечание: красная стрелка просто указывает на соответствующую границу. Стрелка не должна быть включена в ваш ответ.

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

css borders Мика Болен
источник

Ответы:

12

Вы можете использовать CSS (имея в виду, что это не будет работать со старыми версиями IE).

Например, вы можете объединить некоторые формы, такие как прямоугольник и два треугольника. Смотрите это jsfiddle .

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

HTML:

<div id="square"></div>
<div class="align">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
</div>

И CSS:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-left: 100px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}

.align div {
    float: left;
}

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

Yisela
источник
Есть ли способ сделать это, когда полигон использует ширину в процентах?
Мика Болен
Используя подход Yisela, вы можете сделать треугольник с одним делителем (border-left & border-right с 1/2 ширины квадрата; граница top = желаемая высота; и добавить поле margin-top (-1 * border-top) . Вам нужно будет добавить значение отступа к квадрату, чтобы текст не
перекрывал
2
Вы можете поместить эти дополнительные формы в псевдоэлементы :beforeи :afterсохранить свою html«чистоту». :beforeБы левый треугольник, то :afterправый.
Винсент
7

Ответ Йизелы твердый, но я решил, что предложу эту альтернативу: использование полигона или URI изображения с CSS-формами и клип-траекторией. Вот краткое руководство .

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

Демо-скриншот

Джои Кордес
источник
Похоже, это решение будет работать, даже если мне понадобится многоугольник для использования ширины в процентах. Возможно, с помощью vwмодуля CSS . Это звучит возможно?
Мика Болен
2

Другим методом, который также может иметь ограниченную поддержку, является «встроенный SVG в CSS». Я не пробовал это сам, но идея в том, что вы предоставляете ресурс изображения в качестве URL-адреса в объявлении CSS для объекта и передаете ему правильно экранированный URL-адрес, который содержит данные.

SVG - это простой текстовый / xml формат. Пример полигона (из w3schools ):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

Пример встроенного (встроенного) SVG (упрощенного) (из stackoverflow ):

url("data:image/svg+xml;utf8, <svg></svg>");

Обратите внимание, что данные SVG должны быть должным образом "экранированы" для использования в строке, что делает их немного менее привлекательными, чем простая привязка файла SVG.

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

Файлы SVG являются векторными и могут масштабироваться в процентах, в отличие от метода «border». Они также (в настоящее время) имеют лучшую (по крайней мере, не встроенную) поддержку, чем перечисленный метод обтравочного контура. SVG, будучи простым текстом, может даже передаваться на лету, используя, например, PHP или другие сценарии на стороне сервера.

Горацио
источник
0

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

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

И используйте этот CSS на изображении:

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

Это идеальное кросс-браузерное решение.

bogatyrjov
источник