开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

有没有人知道如何用CSS绘制这些类型的箭头？

当然，我可以帮你解答这个问题。

在CSS中，我们可以使用伪元素和一些技巧来绘制各种类型的箭头。下面是一些常见的箭头类型及其实现方法：

箭头朝右的三角形箭头：

.arrow-right {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid black;
}

这个例子中，我们使用了border属性来创建一个三角形，通过设置边框的宽度和颜色来控制箭头的大小和颜色。

箭头朝下的三角形箭头：

.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
}

这个例子中，我们改变了边框的方向，使其形成一个朝下的三角形。

箭头朝左的三角形箭头：

.arrow-left {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid black;
}

这个例子中，我们再次改变了边框的方向，使其形成一个朝左的三角形。

箭头朝上的三角形箭头：

.arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

这个例子中，我们再次改变了边框的方向，使其形成一个朝上的三角形。

除了三角形箭头，我们还可以使用其他形状的元素来绘制不同类型的箭头，例如矩形、圆形等。具体的实现方法会根据箭头的形状和样式而有所不同。

需要注意的是，以上只是一些简单的示例，实际应用中可能需要根据具体需求进行调整和优化。

对于更复杂的箭头样式，可以考虑使用SVG或图标库来实现。这些方法可以提供更多的自定义选项和样式。

腾讯云相关产品和产品介绍链接地址：

腾讯云CSS服务

希望以上回答能够满足你的需求。如果还有其他问题，请随时提问。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

网易考拉前端开奖啦~分享一波面筋

内推投了十几二十家公司，大多没消息。BAT都没有面（百度投了没消息，腾讯打了一次电话来没接到就变灰了，阿里问我有没兴趣改测试岗（表示没兴趣））。于是最终面试的就只有网易考拉和搜狗（一面完等二面）。

02

Web前端开发（高级）下册-目录

svgHTML5中使用svgsvg的基本语法svg内部标签几何图形标签路径标签文字标签

03

【科研猫·绘图】高级技能 – 使用AI绘制Cell封面箭头

我们这次及后面几次的教程，会以一篇Cell文章为实例，教大家如何绘制Cell级别的封面插图。这篇文章是2017年发表在Cell杂志上的，文末有客服小姐姐二维码，可以索取文献原文及本文AI文件。

04

【Canvas】266- 更优雅地基于 canvas 在前端画海报

我们的业务涉及电商、教育行业，出于营销以及功能需要，会有很多卡片展示（长按保存）的需求，或者分享长图的需求。以及我们有面向商家的 PC 端，商家端又能编辑、实时预览卡片的样式。

03

Qt Style Sheet实践（一）：按钮及关联菜单

导读正如web前端开发中CSS（Cascade Style Sheet）的作用一样，Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离。这样，美工设计人员和逻辑实现者可以各司其职而不受干扰。更重要的是，由于界面和逻辑处理是分离的，低耦合性使得代码重构的工作量可以减少到最小。QSS和CSS的语法几乎一致，除了Qt自身增加的一些属性之外，其余的属性都可以在CSS2或CSS3中找到对应的属性。因此，如果曾经有过CSS的使用经验，那么QSS的使用将游刃有余。关于QSS的使用实践，打算撰写一系

05

字体图标的绘制和使用技巧

从事前端的朋友应该对“字体图标”这个词汇不陌生，为了适应越来越挑剔的屏幕，网页图标和简单图案使用 .png 来搭建已经基本上被淘汰了。取而代之的是使用 css3 和 svg 来绘制，而对于网页小图标，

数据获取脚本重大更新

之前很多脚本都有从高德获取，某个路径（公交地铁线路、OD导航等等）。由于我自己不太常用（是的，目前的状态是既不用画图，也不用做项目，平时看书写字、想事情），所以也没有体会到最后想导进ArcGIS的艰难（特别是一条路径一条路径地导入）。

01

杨臻：《PPT 3D科研绘图》课程连载两节

分别是第17节《剖面：解开形状剖面的秘密》以及第18节《渐变中心：突破PPT渐变功能限制》。

01

听了2017年 Swift 开发者大会一些感想

特别感谢@Flow.ci提供门票支持。 2017Swift 开发者大会在深圳举办了两天，第一天是外国嘉宾。因为需要上班，加上全天都是英文，去了也是听不懂，星期六就在公司安心的上班了。星期天很多都是国内的大神，心想总算可以听明白了吧。之前从来没有参加过这种技术分享会议，星期六下班的时刻就十分的激动，期待明天参加。星期六激动的都放弃了平时的加班，直接回家了。为了不错过，特意在星期天定了一个6:40的闹钟，怕迟到，毕竟到后海地铁站需要大概20个地铁站距离。星期天出发的时候，特意带上充电宝，iPad,一个最喜欢古风本子，一直圆珠笔。带上充电宝是需要给手机和 iPad 充电，带上iPad 是为了方便写 Swift 代码进行测试，毕竟 iPad 带有 Playground 软件。带上本子和笔是因为我觉得听这种分享的讲座一定有一些心得，就带上本子和笔随时的记下来。但是果然带去的东西都是没啥用的。上午的第一场是巧哥关于分析 Swift 的性能分析的。当巧哥说全程尝试用英文讲解的时候，我一脸懵逼。坐在我后面的两个人也在讨论，他们说昨天听了一天的英文，幸亏身边有一个伙伴给他们翻译。今天准备轻松一些，但是没想到第一场还是英文讲解。是呀很多人的英语还除了可以马马虎虎的看懂英文文档，但是真实的听别人说时候，估计都会听不懂吧。掏出笔记本本来想听巧哥分享记一下笔记，但是听到巧哥全程英语完全听不懂就又装进书包里面了。虽然巧哥全程英文讲，但是看了巧哥的文档和一些示例代码。倒是理解的也听懂了一些。 Swift 利用 Struct 和类不同的存储方式，从而优化了储存控件，提高了速度。当然还有一些其他的优化，不过我就听懂和记得这些了。不过有一些遗憾就是文档也是英文的，如果加上中文的备注，这样就更完美了，说不定我学到的更多。第二张是滴滴大神戴铭，前面放了他精心绘制的图片，大家前期的注意力都集中在他绘制的图片上了。他讲一些编译器远离，编译器如何把高级语言转换成中间代码到低级语言再到汇编语言。怎样把汇编语言一步步的转换成高级语言。前面讲解他们如果将前段的 CSS 和 JS 转换成 Swift 代码在 iOS 平台运行，听着觉得还有意思，觉得大神们研究的确实不一样，有深度。但是后面讲解编译器远离的时候，我听懵逼了。大学的时候就学计算机远离和编译机。当时觉得很枯燥就讨厌的逃课，因为对于那时的我们完全没有没有游戏更加的有趣。我不清楚技术的发展是不是基础-复杂-基础。可能是基础了解-复杂深入-再到基础深入的过程。但是我承认大学对于编译器远离厌恶，现在更是。所以后面基本上没有听进去了。中途休息的时候，原本打算和大神交流一下。但是看着不是全程英文和高深的听不懂的内容。觉得大神真的是神一般的存在，高高在上，高的都没办法走进去交流，怕被嘲笑自己的无知和弱小。我本来想问一下戴铭滴滴对于模块化是如何打造的，还有一些关于滴滴之前做的修复框架是怎样的思想，怎么解决遇到难题的。最后也没敢去问，感觉自己就是一个菜鸟，怕问出来被嘲笑。就好像别人都在研究1+1怎么等于2时候，我们还在问别人别人高数的问题。第三场是腾讯柯灵杰分享打造一个易扩展高性能的图片框架。他分析是如何一步步将最简易的图片加载框架升级到一个扩展性更高，性能最优的图片加载框架。我看完 PPT，觉得这种技术分享才是我希望看到的。不仅亲民，而且听完十分好理解。看完他分享图片加载框架和现如今加载框架基本上逻辑是一样的，和我自己心里面能想到如出一辙。但是他们做的一些图片的处理渲染，和一些查询的优化。如果我也写一个这样的图片加载框架，觉得最大的区别就是图片渲染和查询的优化了。可能技术越到最后，可能最难突破的就是这些所谓的优化了。下午第一节是王文槿分享的MVVM 框架，我觉得他分享的MVVM 框架和很多公司的都是不一样的。比如在我的脑海里面所认识的 MVVM 框架是这个样子的。模块化架构你为什么这么火，让我如此亲睐你？这一篇文章讲述我对于模块化架构的研究和对于 MVVM 的一些研究。

02

30行Python代码来绘制一个微信图标

微信恐怕是我们最常用的手机软件了，其logo也经历了多次变化，这次我们就用最经典的微信绿色图标来作为例子，给大家展示一下如何用Python来进行设计。其图例如下。

02

如何画出高级酷炫的神经网络图？优秀程序员都用了这几个工具

NN-SVG 可以非常方便的画出各种类型的图，其作者是下面这位小哥哥开发的，他来自于麻省理工学院弗兰克尔生物工程实验室, 该实验室开发可视化和机器学习工具用于分析生物数据。

02

如何用Python爬数据？（一）网页抓取

你期待已久的Python网络数据爬虫教程来了。本文为你演示如何从网页里找到感兴趣的链接和说明文字，抓取并存储到Excel。

02

Python多线程操作之互斥锁、递归锁、信号量、事件实例详解

本文实例讲述了Python多线程操作之互斥锁、递归锁、信号量、事件。分享给大家供大家参考，具体如下：

01

将你的 Virtual dom 渲染成 Canvas

一个基于Vue的virtual dom插件库，按照Vue render 函数的写法，直接将Vue生成的Vnode渲染到canvas中。支持常规的滚动操作和一些基础的元素事件绑定。

04

CSS样式更改——用户界面和指针类型

上篇文章主要讲述了CSS样式更改中的多列、元素是否可见、图片透明度基础知识，这篇文章我们来介绍下CSS样式更改中用户界面和指针类型基础用法。

01

金九银十前端面试题总结（附答案）

这里可以理解为await后面的语句相当于放到了new Promise中，下一行及之后的语句相当于放在Promise.then中。

04

关于网站左右布局适配

新的一年加入新的公司，新的公司做新的项目。公司涉及到的项目基本都是海外的，没有国内的。做过国际化项目的同学应该知道，世界上每个国家的风俗习惯都不同。对于前端开发来说，就网页布局这方面就有正常的ltr布局，即：从左往右布局。但是在一些国家，比如阿拉伯，希伯来等国家，却有着和我们不一样的习惯，遵从了我们老祖先从右往左的阅读习惯，文字也是从右往左书写的习惯，当然是看不懂的。站在前端的角度就是rtl布局。

03

前端面试题

3、实现效果，点击容器内的图标，图标边框变成border 1px solid red，点击空白处重置。

03

如何用 Google Colab 练 Python？

自动配置、有效求助、协作编程、版本控制。一站式解决 Python 新手练习中的痛点

02

CSS 也能实现 if 判断？实现动态高度下的不同样式展现

这个效果在很多场景都会出现，可以算是一个高频场景，那么在今天，我们能否不使用 JavaScript，仅仅凭借 CSS 实现类似于这样的功能呢？

05

如何用AI绘图画出超真实的小姐姐？（Lora篇）

之前分享了如何用stable diffusion webui的安装教程（win篇）。

02

Lorenzo Alvisi：构建可信赖系统的挑战永无止境

采访嘉宾：Lorenzo Alvisi 德克萨斯州大学奥斯汀分校计算机科学系教授，美国计算机协会院士采访视频：http://www.csdn.net/article/2015-12-21/2826528/2 采访文字实录 CSDN：您为何选择计算机研究作为自己的职业，并潜心研究这么多年？其中最有乐趣和最困难的部分都是什么？有没有什么故事能够与我们分享？ Lorenzo Alvisi：首先需要说明，我本科时的专业并不是计算机科学，而是物理。我硕士生论文试图使用某种系统来观察高能物理事件。当时我们还在寻找

09

【教程下载】HTML5游戏开发(全)

HTML5有望成为网络游戏开发的热门新平台。HTML5游戏能够运行于包括iPhone系列和iPad系列在内的计算机、智能手机以及平板电脑上。今天，我们加入HTML5游戏开发的急先锋，明日将成为时代的弄潮儿。

01

十本学习前端必看书籍，让你效率提升10倍

本文介绍了如何通过阅读书籍来学习前端开发，列举了一些推荐的书籍，包括《Head First HTML与CSS》、《CSS权威指南》、《精通CSS》、《图解CSS3》、《JavaScript高级程序设计》、《JavaScript设计模式》、《你不知道的JavaScript》、《JavaScript语言精粹》、《JavaScript DOM编程艺术》等。这些书籍涵盖了前端开发中的基本HTML和CSS知识、CSS布局、JavaScript编程、DOM操作、JavaScript事件、Ajax和jQuery等。通过阅读这些书籍，读者可以学习到前端开发的基础知识，并能够在前端开发领域进行更深入的学习和实践。"

00

小程序实践：基础内容icon，关于图标的5个实现方案等

使用图片也可以达到同样的效果，但是图片如果像素不够，放大了之后效果会虚；还有，图片需要另外存储与加载，使用起来不如图标只使用一个名称方便；再者就是，接下来会看到，图标可以随意改变颜色，而图像不能。

00

美团前端春招三面面经

记一次应该凉了的美团前端春招昨天晚上6点的视频面试，一二三面一次性面完，接近八点结束，然后就等通知，估计凉了一面做了下自我介绍，问了下几个项目和用到的技术。然后开始问问题盒模型，bfc flo

08

7 个开放式 CSS 面试题及回答策略 [每日前端夜话0x2E]

这个问题可以让面试官了解求职者使用 CSS 的经验。它还可以告诉面试官该人是否将该技能作为业余爱好或在学术或专业环境中学习。

03

常用的css3阴影效果，你真的了解吗

css阴影效果是我们经常使用的一个css属性，但你有仔细了解过它吗？是不是用的时候直接从蓝湖上复制过来就行了，那你了解它的每个参数吗？用阴影又能实现哪些好看的效果呢？来看一看我收集总结的css阴影知识吧，可能不全面，欢迎补充。

02

从零搭建微信公众号数据分析体系：看板预搭建

其实上周的这个方案还有很多种做法，关于一题多解，先把这个完成的流程做完再开新的支线吧~

07

使用纯CSS创建三角形形状

如何在页面中实现三角形，有以下几种方式；一、使用css绘制三角形 HTML代码：

CSS代码：（1）箭头向上 .triangle { width: 0; height: 0; border-bottom: 20px solid #333; border-left: 20px solid transparent; border-right: 20px solid transparent; } （2）箭头向右 .triangl

03

Flutter 绘制探索 | 来一起画箭头吧

—\ntheme: cyanosis\n—\n##### 0. 前言\n\n可能有人会觉得，画箭头有什么好说的，不就一根线加两个头吗？其实箭头的绘制还是比较复杂的，其中也蕴含着很多绘制的小技巧。箭头本身有着很强的示意功能 ,通常用于指示、标注、连接。各种不同的箭头端，再加上线型的不同，可以组合成一些固定连接语法，比如 UML 中的类图。\n\n

04

ReactJs的虚拟dom是个啥情况？

这个周末的先行者课程要讲React的一些东西，所以今天写一些React的内容。话说前端操作中最消耗资源的是啥？如果我说dom操作，那应该没有人会反对吧。在以前使用jq的时候是先找到事件再操作dom，算是“事件更新dom”；现在的React和vue、angularJs之类的，都是把dom操作给隐藏起来，开发者就专心搞数据就好了，有数据了之后，更新到dom上去，算是“数据更新dom”。至于这个数据是怎么具体到dom上去的？React们表示，这不用你操心，我给你办了。用什么办的？React说，“虚拟DOM(

05

校招前端面试题

在 JavaScript 第一个版本中，所有值都存储在 32 位的单元中，每个单元包含一个小的类型标签(1-3 bits) 以及当前要存储值的真实数据。类型标签存储在每个单元的低位中，共有五种数据类型：

04

EasyCVR人脸识别框在播放器上显示及消失的机制设定

随着人脸识别技术的成熟，“刷脸”逐渐成为新时期生物识别技术应用的主要领域，为了迎合和满足现代化的市场需求，EasyCVR的人脸识别也在不断优化中，目前可通过对视频监控场景中的人、车、物等进行AI检测与抓拍识别。

02

Quick SDK：深挖手游市场舆情，掌握产品所有动态

为帮助CP解决这些问题，QuickSDK利用独立研发的大数据技术，同步抓取主流论坛、贴吧的数据，包括微博、百度知道、知乎等。我的游戏有没有人在讨论？一眼就知道。大红海市场。当然，想要做手游，不是说有

05

那些年我们一起踩过的坑——WebIDE 前端札记

内容来源：2018 年 3 月 11 日，CODING 资深前端工程师杨臻在“【上海站】CODING 技术小馆-前端工程师的自我修养”进行《那些年我们一起踩过的坑——WebIDE 前端札记》演讲分享。

04

threejs中的各类helper对象介绍

为了简化编码工作，threejs中内置了许多各类helper类，通过helper类，让我们能添加一两行代码展现很酷的功能。还有一些看不见的对象（如光源，边界等），helper对象可以将它们展现出来，也方便我们理解。

02

不写文档你就输了

在移动、Web 和桌面应用或 JavaScript 库的开发领域中，文档在应用的成功之路上扮演着非常重要的角色。但如果你曾经编写过文档，就肯定会同意我的看法：编写文档是开发人员最不喜欢做的事情之一。

04

大佬面了42场得到的方法论！

我在 7 周内一共面试了 42 场，最终拿了微软、蚂蚁、B站、字节、Conviva 的 5 个 Offer。上图是我的面试时间表

04

2--安卓多媒体之Bitmap操作全解析

本篇将介绍： 1.用Bitmap获取图片的一些信息 2.利用已知的Bitmap对象使用canvas生成新的Bitmap 3.图象形状的Matrix矩阵变换的分析 4.图象颜色的ColorMatrix矩阵变换的分析 ---- 一、Bitmap简介我们知道.bmp格式的图片文件，它是一种无压缩，保留全信息的图片格式，称为位图 Bitmap是一个安卓对图片的封装类，名称便是位图，它可以解析二进制的图片文件(如，宽、高、每个像素点等) 二进制流的来源可以是多种多样的(文件、网络、项目资源、二进制

02

揭开Wayland的面纱（一）：X Window的前生今世

今天大家可能在"Wow! Ubuntu"或其他地方看到了这篇文章：Ubuntu 决定未来将启用 Wayland X-Server。

08

写给PHP开发者的五个建议

语法结构教科书上的知识和实际的程序设计是有区别的，真正的知识要在实际的开发中获得。每个 php 的开发人员在开始开发 web 应用程序之前，都应该熟悉下面的五件事： 1. 框架框架可以说是 php 开发中的一个最重要的问题。用 php 开发 web 应用程序时有很多方法，有很多开源的框架可以使用，可以帮助快速的开发，保持更高的一致性和有效性。其中比较好的框架包括 cakephp ，Symfony 和 CodeIgniter 。很多框架还按照 MVC 设计模式，如果你在这个模式下工作过，那你一定会很熟悉。

04

毕业一年左右的前端妹子面经总结

嗯ennnnnn，，，，懒癌症拖延的毛病，趁着最后一个上班日赶紧把最近一周的面试做个总结(虽然我下周一才入职)，作为一位去年才毕业的前端妹子来说，其实还是个技术小白啦，近几年还是想在技术上能有一个很大的提升，而且不是说金三银四嘛(嘤嘤嘤，好像是真的)，所以在试水了两家公司之后，开启了我一周左右的面经之路，大大小小的公司都有面，我就是奔着涨知识和积累经验去的！！！加起来差不多10家公司左右吧，成绩自己也还挺满意的，拿到了6家公司的offer，大小公司也都有，像大华、华三，但是最终综合考虑的结果，去了一家自己面试体验最好的公司，至少也是一家上市公司啦~

02

程序员如何过码农特色的中秋?

🐅 猫头虎博主在此，各位程序猿、程序媛们，中秋佳节即将到来，你们准备好技术大礼包了吗？在本文中，我们将介绍如何用编程技巧绘制出属于我们的中秋礼包，并结合前端技术、数据可视化和Python编程进行展示。帮助你的创意在网络上获得更多的曝光。🎁

01

前端面经（1）

input新增了一些属性：color-调色板、tel-电话、number-数字、date-年月日

02

第09步《前端篇》第2章打造游戏界面第6课

这一节比较琐碎、基础，但也很有学习的必要，各种运算符、if控制语句、循环控制语句都是在代码编写中常用的语法。

03

紫涵的Python小课堂---第三讲设计最简单的Python小程序

选择一个合适的IDE对于我们编译代码也同样重要，如果使用的是linux或者macOS，那么基本是用不上IDE的，直接选择用命令行编译就好了。

05

【说站】如何用python画月饼

以上就是用python画月饼的方法，希望对大家有所帮助。更多Python学习指路：python基础教程

03

用flex布局实现一个流程设计器

支持添加、编辑和删除节点，节点只有四种类型：开始节点、普通节点、分支节点、结束节点。

03

从URL输入到页面展现到底发生什么？

URL（Uniform Resource Locator），统一资源定位符，用于定位互联网上资源，俗称网址。

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭