css实现--三角形/箭头（上下左右）--详细原理

柔光的暖阳◎ 2023-01-12 04:18 423阅读 0赞

## 纯css实现上下左右箭头 ##

**一直以为箭头知识引入的icon标签，直到实习才知道原来纯CSS是都可以实现的**

###### 实现效果在这里插入代码片![在这里插入图片描述][20210127205415177.png] ######

<style>
        #rightRow{
          height: 20px;
          width: 20px;
          border-right: 5px solid black;
          border-top: 5px solid black;
          padding:3px;
          transform: rotate(-135deg);
        }
      </style>
    </head>
    <body>
      <div id="rightRow"></div>
    </body>

1.  设置箭头粗细、颜色、大小代码

border-right: 5px solid black;
          border-top: 5px solid black;
          //设置边框的大小值就可以得到不同粗细的箭头，5px->10px
          //设置padding属性可以将箭头变大变小，3px->5px

1.  配合transform：rotate旋转元素，得到不同方向箭头

transform: rotate(-135deg);
          //一个参数“角度”，单位deg，正数为顺时针旋转，上述逆时针旋转得到左箭头
          //deg=45,将会得到右箭头

1.  扩展：transform具有其他属性

transform:scale(0.5);
    	   transform:scale(0.5,2);
    	   //参数表示缩放倍数：
    	   		*一个参数：表示水平和垂直同时缩放该倍数
    	   		*两个参数：第一个参数指定水平方向，第二个指定垂直方向		
    	   transform:skew(30deg);
    	   transform:skew(30deg,30deg);
    	   //参数表示倾斜角度，单位deg，也是类似上述缩放（水平+垂直）

1.  **感谢观看！实现三角形见下篇**

[20210127205415177.png]: /images/20221119/622401e4851145cb8a8cc085735b03f5.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css实现图片上下左右居中

一种常用的方式是把外层的 div 设置为 table-cell；然后让内部的元素上下左右居中。 CSS 代码如下： .content { widt

向右看齐/ 2023年07月19日 08:10/ 0 赞/ 92 阅读

相关 html基础之css实现三角形或者箭头

![在这里插入图片描述][20200224123818430.png] <!DOCTYPE html> <html lang="en"> <head>

痛定思痛。/ 2023年07月07日 15:58/ 0 赞/ 68 阅读

相关 CSS----border绘制三角形和箭头

首先来看在为元素添加border时，border的样子；假设有如下代码： <div></div> div { width: 50px

以你之姓@/ 2023年06月03日 09:55/ 0 赞/ 31 阅读

相关纯css实现三角形--详细原理

利用css可以实现各种样式的三角形实现效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

ゝ一纸荒年。/ 2023年01月12日 04:21/ 0 赞/ 287 阅读

相关 css实现--三角形/箭头（上下左右）--详细原理

纯css实现上下左右箭头一直以为箭头知识引入的icon标签，直到实习才知道原来纯CSS是都可以实现的实现效果在这里插入代码片![在这里插入图片描述][20

柔光的暖阳◎/ 2023年01月12日 04:18/ 0 赞/ 424 阅读

相关 css实现三角形（上下左右）@莫成尘

先看代码，复制使用即可，以下代码均可复制粘贴使用（我将以注释的形式解释代码左右，您将看到以下效果）。如您满意请给莫成尘点个Fabulous ![css绘制三角形]

快来打我*/ 2022年12月27日 11:00/ 0 赞/ 272 阅读

相关 Css3实现箭头上下浮动的动画效果

[https://blog.csdn.net/qq\_39635302/article/details/79477538][https_blog.csdn.net_qq_396

本是古典何须时尚/ 2022年11月16日 15:12/ 0 赞/ 474 阅读

相关上下跳动的箭头 css

在H5场景动画时，常常会用到着一样一个效果，箭头持续上下跳动来引导用户上下滑动整个页面 ![复制代码][copycode.gif] <!DOCTYPE html >

Dear 丶/ 2022年03月28日 09:00/ 0 赞/ 363 阅读

相关 css上下左右箭头

代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

男娘i/ 2021年11月23日 14:54/ 0 赞/ 476 阅读

相关 CSS3实现左右摆动和上下滑动

1、上下滑动 award { position: absolute; top:

秒速五厘米/ 2021年11月05日 13:28/ 0 赞/ 738 阅读