开发者社区> 问答> 正文

这种红色向右的小箭头如何实现?

screenshot
就是图中的推荐作品和图书简介前面的红色向右小箭头,看不了源码所以不知道怎么写。
是用的字体还是图片呢?
经过@guangpunba的建议

#tushujianjie {
    border: 10px solid transparent;
    border-left: 10px solid red;
}

screenshot

展开
收起
杨冬芳 2016-06-23 14:08:17 2518 0
1 条回答
写回答
取消 提交回答
  • IT从业

    1.css可以直接实现

    <div class="box"><span>图书简介</span></div>
    .box span{position: relative;font-size: 14px;padding-left: 16px;}
    .box span:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border: 8px solid transparent;
        border-left:8px solid orange;
    }

    2.可以用字体图标 Font Awesome

    http://fontawesome.io/icons/

    3.可以用图片

    2019-07-17 19:46:12
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载