Verwenden Sie CSS-Randbild, um eine Zickzackform zu erreichen

So implementieren Sie einen solchen Stil in CSS:

Lösung:

• Die hier benötigte Technologie ist border-image To Verwenden Sie es flexibel, Sie benötigen zunächst ein Bild, das ich hier ausgewählt habe. In den folgenden Bildern können Sie die Farbe des Kreises ändern, um die Farbe des Sägezahns zu ändern:

Die Unterseite ist transparent und quadratisch. Der PS-Screenshot sieht wie folgt aus:

Okay, fangen wir mit dem eigentlichen Code an:

HTML:

<section class="ele-card">
    <p class="ele-card-borderImage"></p></section>

CSS:

.ele-card{
    height: 130px;
    width: 70%;
    position: absolute;
    z-index: 99;
    top: 26%;
    left: 50%;
    margin-left: -35%;
    background: #fee94e;
}.ele-card-borderImage{
    border-top: 15px solid transparent;
    border-image: url(../img/order_border-min.png) 111 44 round;
    width: 100%;
    position: relative;
    top: -4px;
}

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS-Randbild, um eine Zickzackform zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!