📜  如何使用 HTML 和 CSS 为您的网站创建自定义箭头?

📅  最后修改于: 2021-09-01 01:49:44             🧑  作者: Mango

箭头在现代网站中被广泛使用。这些主要用于滑动图像和更改页面。尽管这些箭头有许多可用的图标。有时您需要根据客户的要求设计自定义图像。使用 CSS 创建箭头有很多好处,例如它们不会影响页面加载时间,也非常有利于 SEO 为网站提供自定义触摸。

方法:使用 CSS 创建箭头非常简单。首先,使用一些 box-shadow属性创建一个 L(字母)形状,然后将其旋转到某个角度以将它们(左右箭头)对齐。

HTML 代码:在本节中,创建了两个 div元素,每个箭头一个。



  
    
    
    Arrow


    
    

CSS 代码:

  • 第一步:首先使用box-shadow属性将div元素做成 L 形。
  • 第 2 步:现在以 45 度角和 -135 度角旋转它们,使它们彼此对齐。

注意:您可以为右箭头使用其他一些值,例如 225deg。您可以使用开发人员控制台找到 def 的完美值。您还可以根据需要添加悬停效果。


完整代码:是以上两段代码的组合。



  

    
  
    
  
    Arrow
  
    

  

    
    
  

输出: