Як я можу створити цю неправильну форму рамки за допомогою чистого 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, ви можете скласти трикутник за допомогою одного діва (ліворуч і бордюр праворуч з 1/2 ширини квадрата; межа кордону = бажана висота; і додати край поля (-1 * межа вгорі) . Вам потрібно буде додати значення оббивки до квадрата, щоб уникнути

— промальовування

2

Ви можете розмістити ці додаткові фігури в псевдоелементи :beforeі :afterзберегти html«чистоту». Був :beforeби лівий трикутник, :afterправий.

— Вінсент

7

Відповідь Yisela є твердою, але я подумав, що запропоную цю альтернативу: використання полігона або URI зображення з CSS формами та clip-path. Ось короткий посібник .

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

демо-скріншот

— Джої Кордес
джерело

Здається, це рішення спрацювало б навіть у тому випадку, якщо мені потрібен був багатокутник, щоб використовувати ширину на основі відсотків. Можливо, за допомогою підрозділу CSS vw. Це можливо звучить?

— Міхей Болен

2

Інший метод для цього, який також може мати обмежену підтримку, - це "вбудований SVG в CSS". Я сам не пробував цього, але ідея полягає в тому, що ви надаєте ресурс зображення у вигляді URL-адреси в межах декларації css для об'єкта, і ви передаєте йому правильний скрипт, що містить дані.

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 векторні і їх можна масштабувати за відсотками, на відміну від методу "кордони". Вони також (в даний час) мають кращу (не принаймні вбудовану) підтримку, ніж перелічений спосіб відсікання. 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')";
}

Це ідеально крос-браузерне рішення.

— богатирьов
джерело