箭头在现代网站中被广泛使用。这些主要用于滑动图像和更改页面。尽管这些箭头有许多可用的图标。有时您需要根据客户的要求设计自定义图像。使用 CSS 创建箭头有很多好处,例如它们不会影响页面加载时间,也非常有利于 SEO 为网站提供自定义触摸。
方法:使用 CSS 创建箭头非常简单。首先,使用一些 box-shadow属性创建一个 L(字母)形状,然后将其旋转到某个角度以将它们(左右箭头)对齐。
HTML 代码:在本节中,创建了两个 div元素,每个箭头一个。
Arrow
CSS 代码:
- 第一步:首先使用box-shadow属性将div元素做成 L 形。
- 第 2 步:现在以 45 度角和 -135 度角旋转它们,使它们彼此对齐。
注意:您可以为右箭头使用其他一些值,例如 225deg。您可以使用开发人员控制台找到 def 的完美值。您还可以根据需要添加悬停效果。
完整代码:是以上两段代码的组合。
Arrow
输出: