css 手写返回箭头

绝地灬酷狼 2024-04-22 15:23 79阅读 0赞

> 因为在开发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>

发表评论取消回复

表情：

评论列表（有 0 条评论，79人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 手写返回箭头

因为在开发App时，为了自定义返回栏，返回箭头，一般都用图片，当图片不方便，最好用css样式实现。画出一个正方形，让它旋转45度，只显示你需要的两个边即可。

绝地灬酷狼/ 2024年04月22日 15:23/ 0 赞/ 80 阅读

相关 css箭头

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h...

﹏ヽ暗。殇╰゛Y/ 2024年04月17日 06:06/ 0 赞/ 79 阅读

相关 css 边框写三角箭头旋转

总是忘这个属性 transform: rotate(45deg); 记录一下 width: 20rpx; height: 20rpx; bor

男娘i/ 2023年01月23日 13:50/ 0 赞/ 27 阅读

相关 css画空心箭头

![image][] <i class="u-arrow u-arrow-left "> </i> .u-arrow { display: inli

悠悠/ 2022年07月17日 16:13/ 0 赞/ 290 阅读

相关纯CSS箭头

先看效果图： ![Center][] 代码如下： <html> <head> <title></title> <style> .arbox { p

深藏阁楼爱情的钟/ 2022年06月08日 07:44/ 0 赞/ 262 阅读

相关 css 制作90°箭头

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

﹏ヽ暗。殇╰゛Y/ 2022年05月30日 06:53/ 0 赞/ 226 阅读

相关 ionic改变返回箭头样式

1.定义图标在theme目录下创建icons.scss专门定义图标 .ion-ios-backwhite \{ content: url("../assets/img

迷南。/ 2022年05月08日 00:12/ 0 赞/ 295 阅读

相关 css手写svg

第一次写svg，虽然网上很多例子，但是挺有成就感。加油，??????.... 图片： ![1078093-20190710201929826-692034925.png][

梦里梦外;/ 2021年12月01日 19:20/ 0 赞/ 284 阅读

相关用css样式实现返回箭头

有问题可以扫码加我微信，有偿解决问题。承接小程序开发。微信小程序开发学习交流qq群 581478349；例图： ![20190225181054942.png]

ゝ一纸荒年。/ 2021年09月18日 03:42/ 0 赞/ 865 阅读

相关手写一个带三角箭头的面包屑

![在这里插入图片描述][20200521112833799.gif] 面包屑代码  <div class="crumbs"

骑猪看日落/ 2021年07月24日 19:33/ 0 赞/ 274 阅读