Heim > Artikel > Web-Frontend > Wie schreibe ich einen Pfeil mit CSS3?

Wie schreibe ich einen Pfeil mit CSS3?

藏色散人Original: 2021-01-04 10:17:373921Durchsuche

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.

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>

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!

html5 css css3 transform

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

Vorheriger Artikel：So legen Sie den Abstand zwischen Bildern mit CSS festNächster Artikel：So legen Sie den Abstand zwischen Bildern mit CSS fest

In Verbindung stehende Artikel

Mehr sehen