So implementieren Sie ein Dialogfeld in CSS

So implementieren Sie ein Dialogfeld mit CSS: Erstellen Sie zuerst eine HTML-Beispieldatei. Positionieren Sie dann das übergeordnete Element. Verwenden Sie dann die CSS-Pseudoklasse, um ein Dreieck zu schreiben Stil.

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Reines CSS zum Schreiben eines Dialogfelds mit einem kleinen Dreieck

In tatsächlichen Stilen wird häufig ein Stil geschrieben, der einem Dialogfeld ähnelt, und dieser Stil hat häufig ein kleines Dreieck, wie unten gezeigt:

Beispielbild

Wie schreibe ich es also in CSS? Es ist eigentlich sehr einfach, zuerst das übergeordnete Element relativ zu positionieren und dann die CSS-Pseudoklasse davor oder danach zu verwenden. Sie können ein Dreieck schreiben. Wenn Sie ein Dreieck mit einem Rand wünschen, können Sie zwei überlappen. Der Code lautet wie folgt:

<p>
    纯css写带小三角对话框
</p>

.box2{  
    float:left;  
    position:relative;  
    width:200px;  
    height:100px;  
    border:1px solid #00f;  
    margin:50px;  
    box-sizing:border-box;  
    font-size:14px;  
    padding:10px;  
    box-shadow:0 0 2px rgba(0,0,0,.5)  
}  
.box2:before,
.box2:after{  
    position:absolute;  
    content:'';
    border:10px solid;
}  
.box2:before{  
    right: -20px;
    top:20px;
    border-color: transparent transparent transparent #00f;
}  
.box2:after{  
    border-color: transparent transparent transparent #fff;
    right: -18px;
    top: 20px;
}

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Dialogfeld in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!