Home > Article > Web Front-end > How to write arrow using css3
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:
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!