css制作实心、空心arrow箭头

最新推荐文章于 2024-06-22 09:56:05 发布
最新推荐文章于 2024-06-22 09:56:05 发布
阅读量1.1w 收藏 3
点赞数
分类专栏： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kongjiea/article/details/52454256
版权
css 同时被 2 个专栏收录
25 篇文章 0 订阅
订阅专栏
css3
16 篇文章 0 订阅
订阅专栏

使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码

效果图：


代码：


  
  
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         /*实心箭头*/
  8.         .sx-arrow-down{
  9.             border-style:solid dashed dashed dashed;
  10.             border-width:10px;
  11.             border-color:#f00 transparent transparent transparent;
  12.             width:0;height:0;
  13.         }
  14.         .sx-arrow-up{
  15.            border-style:dashed dashed solid dashed;
  16.            border-color:transparent transparent #f00 transparent;
  17.            border-width:10px;
  18.            width:0;height:0;
  19.         }
  20.         .sx-arrow-left{
  21.            border-style:dashed dashed dashed solid;
  22.            border-color:transparent transparent transparent  #f00;
  23.            border-width:10px;
  24.            width:0;height:0;
  25.         }
  26.         .sx-arrow-right{
  27.            border-style:dashed solid dashed dashed;
  28.            border-color:transparent #f00 transparent  transparent;
  29.            border-width:10px;
  30.            width:0;height:0;
  31.         }
  32.         
  33.         /* 空心箭头 */
  34.         i.kx-arrow{display:block;height:16px;width:16px;float:left;position:relative;
  35.             border:1px solid #000;margin-right:5px;
  36.         }
  37.         em,span{width:0;height:0;
  38.             border-color:transparent;
  39.             position:absolute;
  40.         }
  41.  
  42.  
  43.         i.kx-arrow-up em{
  44.             border-width:8px;  /*边框的高度*/
  45.             border-style:solid dashed dashed dashed;
  46.             border-top-color:#999; /*边框的颜色*/
  47.             top:2px; /*边框的厚度*/
  48.             left:0;
  49.         }
  50.         i.kx-arrow-up span{
  51.             border-width:8px;  /*边框的高度*/
  52.             border-style:solid dashed dashed dashed;
  53.             top:0;
  54.             left:0;
  55.             border-top-color:#fff;/*用白色边框绝对定位盖住多余的部分*/
  56.         } 
  57.  
  58.  
  59.         i.kx-arrow-left em{
  60.             border-width:8px;  /*边框的高度*/
  61.             border-style:dashed dashed dashed solid;
  62.             border-left-color:#999; /*边框的颜色*/
  63.             top:0;
  64.             left:2px; /*边框的厚度*/
  65.         }
  66.         i.kx-arrow-left span{
  67.             border-width:8px;  /*边框的高度*/
  68.             border-style:dashed dashed dashed solid;
  69.             top:0;
  70.             left:0;
  71.             border-left-color:#fff;/*用白色边框绝对定位盖住多余的部分*/
  72.         }
  73.  
  74.         i.kx-arrow-right em{
  75.             border-width:8px;  /*边框的高度*/
  76.             border-style:dashed solid dashed dashed;
  77.             border-right-color:#999; /*边框的颜色*/
  78.             top:0;
  79.             right:2px; /*边框的厚度*/
  80.         }
  81.         i.kx-arrow-right span{
  82.             border-width:8px;  /*边框的高度*/
  83.             border-style:dashed solid dashed dashed;
  84.             top:0;
  85.             right:0;
  86.             border-right-color:#fff;/*用白色边框绝对定位盖住多余的部分*/
  87.         }
  88.  
  89.         i.kx-arrow-down em{
  90.             border-width:8px;  /*边框的高度*/
  91.             border-style:dashed dashed solid dashed;
  92.             border-bottom-color:#999; /*边框的颜色*/
  93.             left:0;
  94.             bottom:2px; /*边框的厚度*/
  95.  
  96.         }
  97.         i.kx-arrow-down span{
  98.             border-width:8px;  /*边框的高度*/
  99.             border-style:dashed dashed solid dashed;
  100.             left:0;
  101.             bottom:0; 
  102.             border-bottom-color:#fff;/*用白色边框绝对定位盖住多余的部分*/
  103.         }
  104.  
  105.         
  106.         /*box-shadow妙用*/
  107.         .icon{display:inline-block;width:31px; height:31px;line-height:31px; text-align:center;background:none; margin:50px; border-radius:50%; box-shadow:0 0 0 1px #ccc inset; transition:box-shadow 0.25s ease 0s; position:relative; cursor:pointer;}
  108.         .icon:hover{box-shadow: 0 0 0 16px #003366 inset;}
  109.         .icon:hover{color:#fff;}
  110.     </style>
  111. </head>
  112. <body>
  113.     1、 mk-less教程有三角形制作
  114.     2、三角形制作工具推荐
  115.     
  116.     <br/>
  117.     ======================实心三角形=============
  118.     <div class="sx-arrow-up"></div>
  119.     <br/>
  120.     <div class="sx-arrow-down"></div>
  121.     <br/>
  122.     <div class="sx-arrow-left"></div>
  123.     <br/>
  124.     <div class="sx-arrow-right"></div>
  125.  
  126.     ======================空心三角形=============
  127.     <br/>
  128.     <i class="kx-arrow kx-arrow-up">
  129.         <em></em>
  130.         <span></span>
  131.     </i> 
  132.     
  133.     <br/>
  134.     <i class="kx-arrow kx-arrow-left">
  135.         <em></em>
  136.         <span></span>
  137.     </i> 
  138.     
  139.     <br/>
  140.     <i class="kx-arrow kx-arrow-right">
  141.         <em></em>
  142.         <span></span>
  143.     </i> 
  144.     
  145.     <br/>
  146.     <i class="kx-arrow kx-arrow-down">
  147.         <em></em>
  148.         <span></span>
  149.     </i> 
  150.  
  151.     
  152.     <br/>
  153.     ======================box-shadow=============
  154.     <br/>
  155.     <div class="icon">a</div>
  156. </body>
  157. </html>

方法二实现空心箭头

：after

content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #c8c8cd;
    border-style: solid;
    -webkit-transform: matrix(.71,.71,-.71,.71,0,0);
    transform: matrix(.71,.71,-.71,.71,0,0);
    position: relative;
    top: -2px;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 2px;

推荐一款箭头自生成工具：

http://apps.eky.hk/css-triangle-generator/

http://thx.github.io/cube/doc/layout/#h7  和cube类型的有alice

kongjiea
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css：用border实现实心三角形、空心三角形、箭头
YangLu888
04-20 2262
用纯css的border属性以及transparent属性实现实心三角形、空心三角形、一个箭头等效果
css制作上下左右箭头
11-08
利用CSS，我们可以轻松实现各种复杂的视觉效果，包括制作上下左右箭头。这些箭头在用户界面中广泛使用，可以指示方向、引导用户注意力或者作为导航元素。以下将详细讲解如何使用CSS来创建这些箭头。 首先，我们可以...
详解CSS3 用border写 空心三角箭头 (两种写法)
09-27
本篇文章主要介绍了CSS3 用border写 空心三角箭头 (两种写法)，非常具有实用价值，需要的朋友可以参考下
css画箭头详解
最新发布
HouYing
06-22 596
【代码】css画箭头详解。
CSS实现实心三角形箭头
zhanjinfeng的博客
08-24 2197
wxss代码： .arrow{ width: 0; height: 0; border-width: 50rpx; border-style: solid; border-color: red blue black bisque } wxml代码： &lt;view class='arrow'&gt;&lt;/view&gt; 需要箭头指向哪个方向，只需将其余三...
css实现箭头
qq_43639075的博客
05-15 1673
1、实心箭头： .arrow { width: 0; height: 0; border: 6px solid transparent; border-bottom-color: #7AC161; position: absolute; content: ‘’; } 2、空心箭头 /下箭头/ .down-arrow { display :inline-block; position: relati...
CSS3巧妙实现空心三角箭头
izwell的博客
12-21 1521
前几天在浏览一个网站时，看到了一个常见的会话框右边显示箭头界面。当时自己就想了想，如果自己来实现，应该就是我以前写的文章中的使用before和after伪元素创建两个三角形来相互重叠覆盖实现。抱着试试看的心态，看了下网站的实现，结果还是有些收获的，下面将我的收获写下来。 实现效果如下 简单描述下具体的实现原理，就是使用伪元素before以及CSS3中的transform实现的。 &lt;st...
div+css布局制作横向带箭头步骤流程样式
11-08
3. **箭头制作**：创建一个表示箭头的图形，可以使用CSS伪元素（`:before`或`:after`）来实现。利用`border`属性和`transform`属性，可以创建指向下一个步骤的箭头效果。 ```css .step:not(:last-child) .step-...
CSS制作箭头图标代码(圆，三角形，椭圆)
09-24
使用CSS3，我们可以实现更多样式上的创新，其中包括使用CSS制作各种图形，如箭头图标。利用CSS3的特性，我们可以抛弃传统的图片图标，转而使用纯CSS代码来创建圆、椭圆和三角形等基本几何图形。 首先，我们来讨论...
css制作带箭头的css边框
05-08
### CSS制作带箭头的CSS边框 #### 知识点概述 本示例通过纯CSS技术实现了一个带有箭头的边框效果，无需使用任何背景图片，这为网页设计提供了一种轻量级且易于维护的方法。此方法主要利用了CSS中的伪元素以及边框...
html如何制作空心箭头,如何在CSS中制作此箭头？
weixin_31845811的博客
06-30 471
神不在的星期二这是使用CSS3功能的整个方法的替代方法。使用此方法的一个优点(以及添加单独答案的主要原因之一)是箭头之间的空间可以是透明的。基本上实现如下：div每个步骤/项目都有一个，它包含需要显示的文本。让我们说height这div是x(在这个例子中50px)。两个伪元素(:before和:after)与它们的创建width相同的父div和height作为半(x/2父)。该:before元件不...
CSS实现div实心和空心箭头
Murpny的博客
06-18 1656
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <title>tim.
css代码编写空心箭头
泥猴桃的博客
12-06 686
突然发现现在这种空心箭头特别流行 ，也许很早以前就流行了，最近才注意到，汗啊，研究了一下结合网上的资料稍微整理了下！ 效果如图： 代码如下：<!-- css --> <style> #talkbubble { width: 120px; height: 80px; position: relative; -moz-border-radius: 10px;
css3 纯css实现绘制三角形、箭头效果
細水、長流√的专栏
04-21 3044
在前端工作中遇到三角形或者需要箭头的样式，我们不仅可以利用图片来实现效果，还可以利用css来实现。 <div class="triangle"></div> 1、利用border来实现 (1)向下三角形 .triangle{ width: 0; height: 0; border-width: 100px; border-style: solid; border-color:#ff0000 transparent transparent transp
纯css实现实心三角形，向右箭头
宋坚强大大~~
07-14 6948
效果如下 实现之前先了解一下css的一个属性: 也就是说 这个属性可以设置透明的色值， 举个例子： 看这个形状是如何实现的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...
CSS3实现空心、实心三角指示箭头（利用border的设置实现）
热门推荐
一个喜欢面朝大海，等待春暖花开的小姑娘
09-27 1万+
三角箭头一般而言，又分为两种，一种是视觉上没有边框的，我们叫做实心三角形；还有一种是视觉上有边框的，而三角箭头刨去边框的部分又要与主体元素的背景颜色一致，我们叫做空心三角形。
纯html+css实现向上向下向左向右，空心实心箭头。
trigger的博客
12-26 1万+
 前端开发中会使用到各种各样的箭头，有时候不断替换图片实在麻烦，掌握这些css小技巧，轻松实现各种箭头。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;实心箭头上下左右都有哦&lt;/title&gt; &lt;/head&gt; &
css实现实心三角箭头，兼容ie
睡不够
10-09 268
css实现实心三角箭头，兼容ie <i class="up"></i> <i class="down"></i> <i class="prev"></i> <i class="next"></i> .up{ display: inline-block; border-top:20px transparent solid; border-right:20px transparent solid; bor
css 向下的实心箭头
09-12
要创建一个向下的实心箭头，你可以使用CSS的border属性来定义箭头的形状。根据引用和引用提供的代码，你可以将border-color属性设置为红色，同时将其他三个方向的border-color属性设置为透明（transparent）。这样就...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值