Jak mogę utworzyć tę nieregularną ramkę za pomocą czystego CSS (bez obrazów)?

12

Staram się unikać używania obrazu tła (lub jakiegokolwiek rozwiązania opartego na obrazie) do skutecznego utworzenia tego:

nieregularna granica

Uwaga: czerwona strzałka wskazuje tylko daną granicę. Strzałka nie powinna być zawarta w odpowiedzi.

Jak mogę utworzyć tę nieregularną ramkę za pomocą czystego CSS (bez obrazów)? Jeśli zdjęć nie da się uniknąć, najbardziej zwięzła i czytelna odpowiedź zostanie oceniona i zaakceptowana.

css borders

— Micah Bolen
źródło

12

Możesz użyć CSS (pamiętając, że to nie będzie działać ze starszymi wersjami IE).

Na przykład można połączyć niektóre kształty, takie jak prostokąt i dwa trójkąty. Zobacz to jsfiddle .

wprowadź opis zdjęcia tutaj

HTML:

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

I 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;
}

Tutaj możesz zobaczyć różne kształty CSS . Większość, jeśli nie wszystkie, wymagają więcej niż jednego diva, więc wyzwaniem byłoby zastosowanie ciemniejszej granicy.

— Yisela
źródło

Czy istnieje sposób, aby to zrobić, gdy wielokąt używa szerokości procentowej?

— Micah Bolen,

Korzystając z podejścia Yiseli, możesz zrobić trójkąt za pomocą jednego div (granica-lewa i granica-prawa o 1/2 szerokości kwadratu; góra granicy = pożądana wysokość; i dodaj margines góry (-1 * border-top) Musisz dodać wartość kwadratu do kwadratu, aby tekst nie docierał do trójkąta

— horatio,

2

Możesz umieścić te dodatkowe kształty w pseudoelementach :beforei :afterzachować swoją html„czystość”. :beforeByłoby lewy trójkąt The :aftersłuszna.

— Vincent

7

Odpowiedź Yiseli jest solidna, ale pomyślałem, że zaproponuję tę alternatywę: użycie wielokąta lub URI obrazu z kształtami CSS i ścieżką przycinającą. Oto krótki samouczek .

Zauważ, że ta metoda będzie działać z jeszcze mniejszą liczbą przeglądarek niż sztuczka z trójkątną ramką. Jeśli jednak chcesz użyć bardziej złożonego kształtu lub owinąć tekst do kształtu, będzie to właściwa droga.

zrzut ekranu demonstracyjny

— Joey Cordes
źródło

Wygląda na to, że to rozwiązanie zadziałałoby nawet, gdybym potrzebował wielokąta do zastosowania szerokości procentowej. Być może za pomocą vwjednostki CSS . Czy to brzmi możliwe?

— Micah Bolen,

2

Inną metodą tego, która może mieć również ograniczoną obsługę, jest „osadzony SVG w CSS”. Nie próbowałem tego sam, ale pomysł polega na tym, że podajesz zasób obrazu jako adres URL w deklaracji css dla obiektu i przekazujesz mu odpowiednio uratowany adres URL, który zawiera dane.

SVG to zwykły format tekstowy / xml. Przykładowy wielokąt (z 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>

Przykładowy wbudowany (osadzony) SVG (uproszczony) (z stackoverflow ):

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

Zauważ, że dane SVG muszą być „ucieczkowe” poprawnie do wbudowanego użycia, co czyni je nieco mniej atrakcyjnymi niż zwykłe łączenie pliku SVG.

W powyższym połączonym wątku znajduje się dyskusja na temat opłacalności metody. Myślę, że osadzenie czegoś tak prostego, jak biały trójkąt jest łatwą decyzją, pod warunkiem wsparcia. Złożone dane w formacie SVG powinny być przechowywane jako plik SVG, a nie wbudowany.

Pliki SVG są wektorowe i mogą być skalowane procentowo, w przeciwieństwie do metody „border”. Mają także (obecnie) lepsze (przynajmniej nieliniowe) wsparcie niż wymieniona metoda ścieżki obcinania. SVG, jako zwykły tekst, może być nawet emitowany w locie przy użyciu np. PHP lub innego skryptu po stronie serwera.

— horatio
źródło

0

Jeśli niebieski obszar na obrazie jest przezroczysty png, a biały obszar jest przezroczysty, musisz dołączyć ten kod HTML, aby upuszczał cienie:

<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>

I użyj tego css na obrazku:

.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')";
}

Jest to idealne rozwiązanie dla różnych przeglądarek.

— bogatyrjov
źródło