当前位置: 首页 > news >正文

css 手写返回箭头

因为在开发App时,为了自定义返回栏,返回箭头,一般都用图片,当图片不方便,最好用css样式实现。

逻辑:
画出一个正方形,让它旋转45度,只显示你需要的两个边即可

代码

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport"content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta name="apple-mobile-web-app-capable" content="no"><title>Css arrow</title>
</head>
<style type="text/css">#triangle-facing-right {display: inline-block;margin: 72px;border-right: 24px solid;border-bottom: 24px solid;width: 120px;height: 120px;transform: rotate(-45deg);}#triangle-facing-left {display: inline-block;margin: 72px;border-left: 24px solid;border-bottom: 24px solid;width: 120px;height: 120px;transform: rotate(45deg);}
</style><body><div id="triangle-facing-right"></div><div id="triangle-facing-left"></div>
</body></html>

 

http://www.lryc.cn/news/334129.html

相关文章:

  • 爬虫逆向非对称加密和对称加密案例
  • 大数据基础设施搭建 - Spark
  • 轻松上手Jackjson(珍藏版)
  • Pytorch数据结构:Tensor(张量)及其维度和数据类型
  • 【THM】Protocols and Servers 2(协议和服务器 2
  • 阿里云服务器可以干什么?阿里云服务器主要用途是干嘛的?
  • LeetCode hoot100-22
  • 蓝桥杯 经验技巧篇
  • QMC5883芯片I2C驱动开发指南
  • 缓存击穿以及解决方案
  • 【电路笔记】-逻辑非门
  • vue-element-admin vue3版本搭建
  • 大话设计模式——11.桥接模式(Bridge Pattern)
  • 新概念英语1:Lesson 25学习笔记
  • Java 8 内存管理原理解析及内存故障排查实践
  • RH850从0搭建Autosar开发环境【3X】- Davinci Configurator之RTE模块配置详解(上)
  • 小米汽车su7全色系展示源码
  • 钉钉事件订阅前缀树算法gin框架解析
  • React18从入门到实战
  • 【漏洞复现】某科技X2Modbus网关多个漏洞
  • 专业140+总410+国防科技大学831信号与系统考研经验国防科大电子信息与通信,真题,大纲,参考书。
  • 【Linux】进程管理(2):进程控制
  • 组合数(费马小定理, 快速幂)
  • VMware Esxi安装群辉系统
  • arm交叉编译器工具
  • Dajngo -- 表单
  • NIO基础知识
  • C语言正则表达式 regnext regreplace regreplaceAll
  • 使用aspose相关包将excel转成pdf 并导出
  • 按关键字搜索商品API接口搜索关键字,显示商品总数,标题,图片,优惠价参数等