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

Heim

Web-Frontend

CSS-Tutorial

Wie schreibe ich einen Pfeil mit CSS3?

Jan 04, 2021 am 10:17 AM

css3

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!

Erklärung dieser Website

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