Wie kann ich diesen unregelmäßig geformten Rand mit reinem CSS erstellen (keine Bilder)?

12

Ich versuche zu vermeiden, ein Hintergrundbild (oder eine bildbasierte Lösung) zu verwenden, um dies effektiv zu erstellen:

unregelmäßige Grenze

Hinweis: Der rote Pfeil zeigt nur auf die betreffende Grenze. Der Pfeil sollte in Ihrer Antwort nicht enthalten sein.

Wie kann ich diesen unregelmäßig geformten Rand mit reinem CSS erstellen (keine Bilder)? Wenn Bilder unvermeidlich sind, wird die prägnanteste und lesbarste Antwort bewertet und akzeptiert.

css borders

— Micah Bolen
quelle

12

Sie können CSS verwenden (dies funktioniert jedoch nicht mit älteren IE-Versionen).

Sie können beispielsweise einige Formen wie ein Rechteck und zwei Dreiecke kombinieren. Siehe diese Jsfiddle .

Bildbeschreibung hier eingeben

HTML:

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

Und das 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;
}

Sie können hier eine Vielzahl von CSS-Formen sehen . Die meisten, wenn nicht alle, erfordern mehr als ein Div. Die Herausforderung besteht also darin, einen dunkleren Rand anzubringen.

— Yisela
quelle

Gibt es eine Möglichkeit, dies zu tun, wenn das Polygon eine prozentbasierte Breite verwendet?

— Micah Bolen

Mit Yiselas Ansatz können Sie das Dreieck mit einem Div (border-left & border-right mit 1/2 der Breite des Quadrats; border top = gewünschte Höhe; und einen Rand-Top von (-1 * border-top) hinzufügen. . Sie müßten Füllwerts zum Quadrat hinzufügen verhindern Text auf das Dreieck von Läppen.

— Horatio

2

Sie könnten diese zusätzlichen Formen in Pseudo-Elemente einfügen :beforeund :afterIhre html"sauber" halten. Das :beforewäre das linke Dreieck, :afterdas rechte.

— Vincent

7

Yiselas Antwort ist eindeutig, aber ich dachte, ich würde diese Alternative anbieten: Polygon oder eine Bild-URI mit CSS-Formen und Clip-Pfad. Hier ist ein kurzes Tutorial .

Beachten Sie, dass diese Methode derzeit mit noch weniger Browsern als dem Trick mit dem Dreiecksrahmen funktioniert. Wenn Sie jedoch eine komplexere Form verwenden oder Ihren Text in die Form einbetten möchten, ist dies der richtige Weg.

Demo-Screenshot

— Joey Cordes
quelle

Es scheint, dass diese Lösung sogar funktionieren würde, wenn ich das Polygon zur Verwendung einer prozentbasierten Breite benötige. Vielleicht mittels der CSS- vwEinheit. Klingt das möglich

— Micah Bolen

2

Eine andere Methode, die möglicherweise auch nur eingeschränkte Unterstützung bietet, ist "eingebettetes SVG in CSS". Ich habe dies selbst nicht ausprobiert, aber die Idee ist, dass Sie eine Bildressource als URL in der CSS-Deklaration für das Objekt bereitstellen und eine ordnungsgemäß ausgeblendete URL übergeben, die die Daten enthält.

SVG ist ein Nur-Text / XML-Format. Ein Beispielpolygon (von 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>

Ein Beispiel für Inline (eingebettet) SVG (vereinfacht) (von Stackoverflow ):

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

Beachten Sie, dass die SVG-Daten für die Inline-Verwendung ordnungsgemäß "maskiert" werden müssen, was sie etwas weniger attraktiv macht als das bloße Verknüpfen einer SVG-Datei.

Es gibt einige Diskussionen bezüglich der Durchführbarkeit der Methode in dem oben verlinkten Thread. Ich denke, dass es eine einfache Entscheidung ist, etwas so Einfaches wie ein weißes Dreieck einzubetten, vorausgesetzt, es gibt Unterstützung. Komplexe Daten im SVG-Format sollten nicht inline, sondern als SVG-Datei gespeichert werden.

SVG-Dateien sind Vektoren und können im Gegensatz zur "Rahmen" -Methode prozentual skaliert werden. Sie haben (derzeit) auch eine bessere (zumindest nicht inline) Unterstützung als die aufgeführte Beschneidungspfadmethode. SVG kann als reiner Text sogar direkt mit PHP oder anderen serverseitigen Skripten ausgegeben werden.

— Horatio
quelle

0

Wenn Ihr blauer Bereich im Bild ein transparenter PNG-Bereich ist und der weiße Bereich transparent, müssen Sie diesen HTML-Code einfügen, damit er Schatten wirft:

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

Und benutze diese CSS für das Bild:

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

Dies ist eine vollkommen browserübergreifende Lösung.

— Bogatyrjov
quelle