提供一个css实现箭头，三角形

最新推荐文章于 2024-05-13 10:52:32 发布
最新推荐文章于 2024-05-13 10:52:32 发布
阅读量169 收藏
点赞数
文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43954090/article/details/105720245
版权 
<!DOCTYPE html>
<html>
  <style>

.c7ncd-pipeline-scroll {
  display: inline-flex;
  padding: 0 14px;
  min-width: 100%;
}
.c7ncd-pipeline-title-head {
  padding-left: 12px;
  color: #4d90fe;
  background: rgba(77, 144, 254, 0.08);
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 60px;
  -ms-flex: 0 0 60px;
  flex: 0 0 60px;
  height: 36px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 270px;
  padding: 10px 12px 10px 30px;
  background: #f4f4f4;
  border-top: 2px solid;
  border-bottom: 2px solid;
}
.c7ncd-pipeline-title-head::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
}
.c7ncd-pipeline-title-head::after {
    content: "";
    position: absolute;
    right: -20px;
    bottom: -2px;
    width: 0;
    height: 0;
    border-left: 20px solid #f4f4f4;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    z-index: 1;
}
.arrow-tail::before {
    top: 12.5px;
    left: -8px;
    content: "";
    z-index: 2;
    position: absolute;
    width: 36px;
    height: 0;
    border-top: 2px solid;
    -webkit-transform: rotate(56deg);
    -ms-transform: rotate(56deg);
    transform: rotate(56deg);
}
.arrow-tail::after {
    bottom: 12.5px;
    left: -8px;
    -webkit-transform: rotate(-56deg);
    -ms-transform: rotate(-56deg);
    transform: rotate(-56deg);
    content: "";
    z-index: 2;
    position: absolute;
    width: 36px;
    height: 0;
    border-top: 2px solid;
    -webkit-transform: rotate(56deg);
    -ms-transform: rotate(56deg);
    transform: rotate(126deg);
}
.arrow-head::before {
    top: 12.5px;
    right: -28px;
    content: "";
    z-index: 2;
    position: absolute;
    width: 36px;
    height: 0;
    border-top: 2px solid;
    -webkit-transform: rotate(56deg);
    -ms-transform: rotate(56deg);
    transform: rotate(56deg);
}
.arrow-head::after {
    bottom: 12.5px;
    right: -28px;
    -webkit-transform: rotate(-56deg);
    -ms-transform: rotate(-56deg);
    transform: rotate(-56deg);
    content: "";
    z-index: 2;
    position: absolute;
    width: 36px;
    height: 0;
    border-top: 2px solid;
    -webkit-transform: rotate(56deg);
    -ms-transform: rotate(56deg);
    transform: rotate(124deg);
}
  </style>
<body>

  <script>
   

  </script>

  <div class="c7ncd-pipeline-scroll">
    <div class="c7ncd-pipeline-title-head">
      <div class="arrow-tail arrow-tail_unexecuted">

      </div>
      <div class="arrow-head arrow-tail_unexecuted">

      </div>
    </div>
    <div class="c7ncd-pipeline-title-head" style="margin-left: 30px;">
      <div class="arrow-tail arrow-tail_unexecuted">

      </div>
      <div class="arrow-head arrow-tail_unexecuted">

      </div>
    </div>
  </div>

</body>
</html>
麦文豪（victor）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 链接样式
天空之外
09-18 904
超链接是网页的基本元素之一，几乎每个网页我们都可以看到超链接。在之前讲 HTML 的时候就讲过，超链接会自带一些默认样式，例如未点击的超链接会显示带下划线的蓝色字体、点击时字体变为红色、点击后字体变为紫色。这种点击前后不一致的样式，其实是超链接的伪类样式，伪类就是不根据名称、属性或者内容，而是根据标签处于某种行为或状态时的特征来修饰样式，也就是说超链接将根据不同的状态显示不同的样式。 去掉链接的下划线 首先，我们知道超链接本身是带有默认下划线的，但是一般我们在网页中看到的超链接都是没有下划线的，那么要如何去
手把手教你用CSS实现带箭头的流程进度条
12-13
本文介绍的是利用纯CSS的带箭头流程进度条，兼容到IE8，需要的朋友们下面来一起学习学习。 首先写出一个基本的样式。 .cssNav li{ padding: 0px 20px; line-height: 40px; background: #50abe4; display: inline-block; color: #fff; position: relative; } 接下来使用 :after 伪类画出一个三角形，定位到右边，如下： .cssNav li:after{ content: ''; display: blo
纯CSS实现箭头、气泡让提示功能具有三角形图标
09-25
准备添加tooltips提示信息效果.实现很容易，但我想要让提示功能具有三角形的指示图标，本文两种实现方式: 使用或不使用 before 和 :after 伪元素，示例如下，有此需求的朋友可以参考下
【VUE】Vue3绘制箭头组件
最新发布
ruisasaki的博客
05-13 590
vue+css绘制箭头
用纯CSS实现的箭头
stepli的专栏
04-22 1979
分类 编程技巧    发布  newghost 3/21/2014   原文  注意 转载须保留原文链接，译文链接，作者译者等信息。  原文链接： 用CSS即可绘制出各种箭头，无需裁剪图片，甚至没有用到CSS3的东西。对浏览器支持良好。 基本原理 原理非常简单，通过截取border(边框)的部分“拐角”实现，几行CSS代码即可理解： 一个梯形 当元素宽、高和边框的宽相近
使用CSS3绘制几个常见的图案（三角、箭头）
热门推荐
Sweet_HaoChen的博客
10-10 1万+
一、绘制三角形 首先先做一个测试深入理解一下盒子模型，主要体会一下height和border-width的用法： #div1{ height: 80px; border-style: solid; border-width: 100px 100px 100px 100px; bor...
css实现一个三角箭头
baiyicanggou_a的博客
11-01 673
今天浏览12306网站的时候看见有个箭头图标 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191101180502710.png) 我们可以用css来实现这个图标 1.下面为css部分的代码，html中直接添加个div就可以。设置div的边框0px，会出现4个三角形拼成的正方形 <style> #icon { widt...
利用纯css实现一个简单的三角箭头
前端开发小白9527
03-25 549
通过border属性控制箭头的朝向 直接将边框颜色改为透明色，通过控制边框的长度 来控制三角形的形状 <body> <div class="triangle"></div> </body> ​ <style> .triangle{ width: 0; height: 0; border-radius: 1
CSS入门到实战之三角箭头的实现
weixin_45921611的博客
09-23 400
在生活中经常会遇到如下图所示一个大框旁边有一个三角箭头 那么它是如何实现的呐 首先，我们先来讨论三角箭头的实现 平常通过边框来实现的三角是无法设置边框的，毕竟三角本身就是边框来实现的，所以换一种思考方式来想，通过定位来完成 是的，方法就是白色的三角压盖灰色三角，使用定位是非常简单的。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l.
vue css实现带有三角型箭头的边框（带边框阴影以及不带阴影）
lxs_bzdmn的博客
05-19 2029
css实现有阴影效果的三角箭头，实际上是让两个三角形（下图的箭头，外部阴影的是利用伪类after写的带阴影的箭头，内部是一个背景色为白色的三角形，这个三角形可以用伪类before写的）进行定位从而实现。如下图的效果 html如下： <div class="centerRegion"> <div class="rightMore" @click="isMoerTouch = true" style="font-size: 0.2rem; margin-right:.
Vue ElementUI el-input-number 改变控制按钮 icon 箭头为三角形
前端技术
04-11 661
【代码】Vue ElementUI el-input-number 改变控制按钮 icon 箭头为三角形。
纯CSS绘制三角形箭头效果
09-25
这段代码中，每个箭头都是一个`div`元素，其宽高都设置为0，然后通过设置不同的边框宽度和颜色来形成三角形。关键在于，对于每个箭头，有两个边界的边框是透明的，它们形成了箭头的斜面；另一个边界则设置了颜色，...
纯CSS绘制三角形箭头图案技术解析
09-24
首先，让我们看看如何使用基本的CSS规则创建一个向上指的箭头。以下是一个简单的例子： ```css div.arrow-up { width: 0; height: 0; border-left: 5px solid transparent; /* 左侧斜边 */ border-right: 5px ...
Css绘制箭头实现代码
09-25
描述中提到的方法是利用CSS的边框属性（border）来构造一个看起来像箭头的三角形，这个方法兼容到低版本的IE浏览器，如IE6。 在CSS中，通过设置一个元素的宽度（width）和高度（height）为0，并为各个边框设置不同...
用CSS样式制作小三角和小箭头
weixin_44827568的博客
06-11 1256
利用css的border的style,width,color三个属性制作小三角和小箭头,颜色大小想怎么变就怎么变，不用担心使用图片失真等问题。 需要注意的是left,right,投票,bottom,这4个方位,需要一定的空间想象力,记住一个,其他的可以自己推算出来 transparent表示透明 小三角: HTML结构 <div class="left"></div> &l...
html中带箭头的直线代码,纯CSS实现的带箭头线条
weixin_35807050的博客
06-04 2737
CSS语言：CSSSCSS确定.link {position: relative;display: block;padding: 1em 3em 1em 1em;font-size: 30px;font-weight: bold;text-decoration: none;color: #e74c3c;box-shadow: inset 0 0 0 0.2em #e74c3c;}.link:aft...
vue 百度地图(vue-baidu-map)绘制方向箭头折线
qq_45379479的博客
04-27 5089
官方文档地址： 百度地图 JavaScript API v3.0 vue-baidu-map 原生JS在折线上添加方向箭头官方案例 在开发过程中发现vue-baidu-map封装的BmPolyline折线组件不能顺利绘制出带箭头的纹理。 原因是BmPolyline文档中虽然有icons属性，但是对应的源文件中并没有props接收icons 最初的开发思路： 根据vue-baid...
vue+html+css 箭头导航栏实现
Lassia_tl的博客
01-13 703
vue+html+css 实现箭头导航栏效果
CSS纯样式实现箭头、对话框等形状
weixin_34391445的博客
08-18 211
在使用第三方框架bootstrap的时候，本以为其是图片实现的小箭头，后来使用开发工具查看是用CSS来实现的，现记录如下： 之前都没仔细去观注过其原理，都是拿来使用，在实现小箭头之前需要了解下CSS的before跟after伪类的用法，这个链接有详细说明http://www.webhek.com/understanding-pseudo-element-before-and-after 理解完...
css 一个三角形箭头
11-03
可以使用CSS代码来绘制三角形箭头，以下是一个向右的箭头的CSS代码： ``` .arrow-right { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值