Home > Article > Web Front-end > How to write arrow using css3

How to write arrow using css3

藏色散人Original: 2021-01-04 10:17:373923browse

How to write arrows with CSS3: First create a front-end sample file; then use the transform property in CSS3 to implement a small square filled with no background; finally, you can achieve the arrow effect by setting its border and flipping.

The operating environment of this tutorial: Dell G3 computer, Windows 7 system, HTML5&&CSS3 version.

Recommended: "css video tutorial"

How to write arrows with css3?

You can use the transform attribute in CSS3 to first implement a small square filled with no background, set its border, and flip it to realize the arrow.

Let’s take a look at the example below:

<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:

How to write arrow using css3

The above is the detailed content of How to write arrow using css3. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 transform

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set the interval between pictures with cssNext article：How to set the interval between pictures with css

See more

How to write arrow using css3

Related articles