Rumah > Artikel > hujung hadapan web > 箭头用css3怎么写
箭头用css3怎么写
- 藏色散人asal
- 2021-01-04 10:17:373917semak imbas
用css3写箭头的方法：首先创建一个前端示例文件；然后利用CSS3中的transform属性实现一个没有背景填充小正方形；最后通过设置它的边框和翻转即可实现箭头效果。
本教程操作环境：Dell G3电脑、Windows7系统、HTML5&&CSS3版本。
推荐：《css视频教程》
箭头用css3怎么写？
可以利用CSS3中的transform属性，先实现一个没有背景填充小正方形，设置它的边框、翻转就可以实现箭头了。
下面通过示例来看看：
<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>效果图：
Atas ialah kandungan terperinci 箭头用css3怎么写. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：图片之间的间隔css怎么设置Artikel seterusnya：css如何添加flash