• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搜讯息吧

带你玩转css中各种方向小箭头_html5教程,css

HTML ytg3114 3个月前 (07-07) 135次浏览 0个评论 扫描二维码

带你玩转css中各种方向小箭头_html5教程,css

在开发页面的时候,遇到很多的列表都需要用到箭头,可以直接用图片作背景铺垫,纯CSS也能实现,并且没有兼容性顾虑,不用CSS3,相比而言,比图片更好用。

原理:一个高宽相等的正方形,选取你所需要的某一边,截取之,就是一个梯形,当高宽都为0,且其他边为透明颜色时,一个三角形就出来了

梯形代码:
带你玩转css中各种方向小箭头_html5教程,css

html:
<div class="arrow"></div>
css:
arrow{
width:10px;
height:10px;
border:10px solid #000;
border-left-color:orange;
}

把高宽设为0,其他边为透明颜色,三角形出来了:
带你玩转css中各种方向小箭头_html5教程,css

html:
<div class="arrow"></div>
css:
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;//左箭头
}

在开发中,可以利用伪类,定位实现,不改变dom结构,简洁优雅。content提供给三角形的位置,这个属性不能少。
带你玩转css中各种方向小箭头_html5教程,css

html:
<div class="arrow">文字文字</div>
css:
div{
position:relative;
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;
position:absolute;
content:'';
}

现在追求平面化设计,还有另一种三角线箭头,更受欢迎。
设置两个伪类,前一个伪类覆盖至另一个了伪类,留出一些线出来就好:
带你玩转css中各种方向小箭头_html5教程,css

html:
<div class="arrow">文字文字</div>
CSS:
div {
       position: relative; 
    }
    .arrow:after,.arrow:before {
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-left-color: orange;
        position: absolute;
        content: "";
    }
   .arrow:before{
    top: 0;
   left: 70px;//根据实际情况调整
   border-left-color: white;
   }

may you like it.

感谢大家的阅读,希望大家收益多多。

本文转自:https://blog.csdn.net/qq_34250472/article/details/55513862

推荐教程:《CSS教程》

以上就是带你玩转css中各种方向小箭头的详细内容,更多请关注ki4网其它相关文章!


搜讯息 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:带你玩转css中各种方向小箭头_html5教程,css
喜欢 (0)
[1353713598@qq.com]
分享 (0)
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址