Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie ein Dialogfeld in CSS

So implementieren Sie ein Dialogfeld in CSS

藏色散人
藏色散人Original
2021-07-26 11:06:374623Durchsuche

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.

So implementieren Sie ein Dialogfeld in CSS

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:

So implementieren Sie ein Dialogfeld in CSS

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn