So implementieren Sie Pfeile im Front-End-CSS

So implementieren Sie Pfeile im Front-End-CSS: Legen Sie das Pfeilfeld fest und legen Sie die Attribute im div fest. Der Code lautet [

< ;/div>].

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

So implementieren Sie Pfeile im Front-End-CSS:

Rendering:

HTM-Teil:

<div class="arrow_box">
    <div class="arrow"></div>
</div>

Nach dem Login kopieren

CSS-Teil:

.arrow_box{
    width:100px;
    height:100px;
    border-radius: 10px;
    background: rgba(255,0,0,0.5);
    position: relative;
}     
 
.arrow{
    width:0;
    height:0;
    border-width: 10px;
    border-style:solid;
    border-color:transparent transparent transparent rgba(255,0,0,0.5);
    position: absolute;
    right:-20px;
    top:35px;
}

Nach dem Login kopieren

Verwandte Lernempfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Pfeile im Front-End-CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!