Verwenden Sie CSS, um kleine scharfe Ecken und Blaseneffekte im Chat-Feld zu erstellen

Ich sehe solche scharfen Ecken oft nicht und dachte, sie wären alle mit Bildern erstellt. Später stellte ich zu meiner Überraschung fest, dass viele davon sowohl schön als auch ressourcenschonend sind . Es ist wirklich das Beste aus beiden Welten!

Wie kann man diesen Effekt mit CSS erzielen? Schreiben wir zunächst einen einfachen Code:

Der Code lautet wie folgt:

<p class="arrow"></p>
<style type="text/css">
.arrow {    
width:0;    
height:0;
    
font-size:0;
border:solid 10px #000;
}</style>

Hier können wir ein schwarzes Quadrat erhalten, das eigentlich aus einem Rand besteht, weil die Breite und Höhe von p Alle sind 0,. Schauen wir uns also genauer an, wie der obere, untere, linke und rechte Rand von p aussehen, wenn seine Breite und Höhe beide 0 sind. Als Nächstes stellen wir die Farben jeder Seite des Randes auf unterschiedliche Farben ein:

Der Code lautet wie folgt:

<p class="arrow"></p>
<style type="text/css">
.arrow {
    width:0;
    height:0;
    font-size:0;
    border:solid 10px;
    
border-color
:#f00 #0f0 #00f #000;
}
</style>

Wir haben festgestellt, dass, wenn die Breite und Höhe von p beide 0 sind, der gesamte Rand aus vier Dreiecken besteht, wobei jede Seite ein Dreieck ist Wir können diese Funktionen nutzen und niedliche kleine scharfe Ecken erstellen. Wir müssen lediglich die Farbe des unnötigen dreiseitigen Rahmens (Dreiecks) so einstellen, dass sie mit dem Hintergrund übereinstimmt, sodass Sie nur das gewünschte Dreieck sehen können, und dann die Position mithilfe der Positionierung anpassen. Der spezifische Code lautet wie folgt:

Der Code lautet wie folgt:

<p class="s
end
">
    <p class="arrow"></p>
</p>
<style type="text/css">
body {
    
background
:#4D4948;
}
.send {
    
position:relative;
    width:150px;
    height:35px;
    background:#F8C301;
    border-radius:5px; /* 圆角 */
    
margin:30px auto 0;
}
.send .arrow {
position:absolute;
    
top:5px;
right:-16px; /* 圆角的位置需要细心
调试
哦 */
    width:0;
    height:0;
    font-size:0;
    border:solid 8px;
    border-color:#4D4948 #4D4948 #4D4948 #F8C301;
}
</style>

Sie sind fertig, der Effekt ist wie folgt:

[Verwandte Empfehlungen]

1. Kostenloses CSS3-Video-Tutorial

2. Browser implementiert leistungsstarke CSS3-Animation auf Mobilgeräten

3. H5+CSS3-Codebeispiel zum Erzielen von Bild-Fly-In- und Fade-Out-Effekten

4. Lernen Sie, wie Sie mit CSS3 8 Typen erstellen zum Laden von Animationen

5.Lernen Sie, wie Sie mit CSS ein standardmäßiges kreisförmiges Muster zeichnen

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um kleine scharfe Ecken und Blaseneffekte im Chat-Feld zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!