How to write arrow using css3-CSS Tutorial-php.cn

How to write arrow using css3

藏色散人

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

Original

3948 people have browsed it

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.

How to write arrow using css3

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>

Copy after login

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!