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.

Micah Bolen
źródło

Odpowiedzi:

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