css 手写返回箭头

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

逻辑:

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

代码

html 复制代码
<!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>
相关推荐
Xiaouuuuua33 分钟前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser1 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI1 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三1 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三1 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹1 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三1 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
我是若尘2 小时前
Webpack 入门到实战 - 复习强化版
前端
晓13132 小时前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
倔强青铜三2 小时前
苦练Python第1天:为何要在2025年学习Python
前端·后端·python