Wie schreibe ich einen Pfeil mit CSS3?-CSS-Tutorial-php.cn

Wie schreibe ich einen Pfeil mit CSS3?

藏色散人

Freigeben： 2023-01-04 09:38:31

Original

3950 Leute haben es durchsucht

So schreiben Sie Pfeile mit CSS3: Erstellen Sie zunächst eine Front-End-Beispieldatei. Verwenden Sie dann die Transformationseigenschaft in CSS3, um ein kleines Quadrat ohne Hintergrund zu implementieren. Schließlich können Sie den Pfeileffekt erzielen, indem Sie dessen Rand festlegen und umdrehen.

Wie schreibe ich einen Pfeil mit CSS3?

Die Betriebsumgebung dieses Tutorials: Dell G3-Computer, Windows 7-System, HTML5- und CSS3-Version.

Empfohlen: „CSS-Video-Tutorial“

Wie schreibe ich Pfeile mit CSS3?

Sie können das Transformationsattribut in CSS3 verwenden, um zunächst ein kleines, ohne Hintergrund gefülltes Quadrat zu implementieren, seinen Rand festzulegen, es umzudrehen und dann den Pfeil zu implementieren.

Schauen wir uns das folgende Beispiel an:

<style>
        .left{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(-135deg);
            
        }
        .right{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(45deg);
        }
        .top{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(-45deg);
        }
        .bottom{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(135deg);
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <hr>
    <div class="right"></div>
    <hr>
    <div class="top"></div>
    <hr>
    <div class="bottom"></div>
</body>

Nach dem Login kopieren

Rendering:

Wie schreibe ich einen Pfeil mit CSS3?

Das obige ist der detaillierte Inhalt vonWie schreibe ich einen Pfeil mit CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!