如何用纯CSS实现的箭头的效果?

编程之家收集整理的这篇文章主要介绍了如何用纯CSS实现的箭头的效果?编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

《如何用纯CSS实现的箭头的效果?》要点:
本文介绍了如何用纯CSS实现的箭头的效果?,希望对您有用。如果有疑问,可以联系我们。

用CSS即可绘制出各种箭头,无需裁剪图片,甚至没有用到CSS3的东西。对浏览器支持良好。

  基本原理

  原理非常简单,通过截取border(边框)的部分“拐角”实现,几行CSS代码即可理解:

  一个梯形

  当元素宽、高和边框的宽相近(等)时,改变某一边的颜色可以看到一个梯形;

<div id="demo11"></div>
<style>
       #demo11 {
              border: 10px solid #000;
              border-left-color: #f00;
              width: 10px;
              height: 10px;
       }
</style>

一个三角形

  当元素宽、高为零,且其他边为透明颜色时,可以形一个三角形。

<div id="demo12"></div>

<style>
       #demo12 {
              border: 10px solid #000;
              border-left-color: #f00;
              width: 0;
              height: 0;
       }
</style>

任意角度的三角形

  改变各个边的宽度,即通过调整“边框”厚度可以配置出任意角度

<div id="demo14"></div>

<style>
       #demo14 {
              border: 10px solid transparent;
              border-left: 20px solid #f00;
              width: 0;
              height: 0px;
       }
</style>

通过伪元素实现

  三角形可以通过伪元素绘制出,而无需改变原来的DOM结构

<span id="demo15">文字内容</span>

<style>
       #demo15{
              position: relative;
       }
       #demo15:after {
              border: 10px solid transparent;
              border-left: 10px solid #f00;
              width: 0;
              height: 0;
              position: absolute;
              content: ' '
       }
</style>


伪元素实现三角线箭头

  通过伪元素绘制出的两个,一个与背景色相同覆盖部分红色箭头,形成三角线

<span id="demo15">文字内容</span>

<style>
       #demo16{
              position: relative;
       }
       #demo16:after, #demo16:before {
              border: 10px solid transparent;
              border-left: 10px solid #fff;
              width: 0;
              height: 0;
              position: absolute;
              top: 0;
              right: -20px;
              content: ' '
       }

       #demo16:before {
              border-left-color: #f00;
              right: -21px;
       }
</style>

三角线分割的Tab页

<ul id="demo17">
       <li>文字内容 Tab1</li>
       <li>文字内容 Tab2</li>
       <li>文字内容 Tab3</li>
</ul>

<style>
       #demo17{
              font-size: 10px;
              height: 24px;
       }

       #demo17 li {
              float: left;
              position: relative;
              list-style: none;
              margin: 0 20px 12px -19px;
              border-top: solid 1px #ddd;
              border-bottom: solid 1px #ddd;
              padding-left: 12px;
       }

       #demo17 li:after, #demo17 li:before {
              border: 10px solid transparent;
              border-left: 10px solid #fff;
              width: 0;
              height: 0;
              position: absolute;
              top: 0;
              right: -18px;
              content: ' '
       }

       #demo17 li:before {
              border-left-color: #ddd;
              right: -19px;
       }
</style>

三角形跟矩形组合成提示

  这里还有另一种效果,使用三角形跟矩形组合成提示

<div id="demo"></div>

<style>
       #demo {
              width: 100px;
              height: 100px;
              background-color: #ccc;
              position: relative;
              border: 4px solid #333;
       }

       #demo:after, #demo:before {
              border: solid transparent;
              content: ' ';
              height: 0;
              left: 100%;
              position: absolute;
              width: 0;
       }

       #demo:after {
              border-width: 9px;
              border-left-color: #ccc;
              top: 15px;
       }

       #demo:before {
              border-width: 14px;
              border-left-color: #333;
              top: 10px;
       }
</style>

总结

以上是编程之家为你收集整理的如何用纯CSS实现的箭头的效果?全部内容,希望文章能够帮你解决如何用纯CSS实现的箭头的效果?所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478

猜你在找的CSS相关文章

在做移动端开发的时候大家肯定会遇到适配问题,手机的屏幕大小有非常多的类别,使用传统的px距离单位已经无法满足我们的需要,于是rem便横空出世,他与百分比定位是比较像的,但是也是有一定的区别,在这里就跟
最近工作有一个需求是将一个界面改为响应式布局,由于UI还没有给设计,于是自己先查了一下资料做了一个demo。其实实现响应式布局的方式有很多,利用media实现就是其中一种,但是他也有一些缺点,比如说要
因为项目需要,别人想让我给他写一个个人博客,并且给了我一个其他人的网页,可以点此查看。有的同学可能说了,第三方博客框架这么多,为什么还要去手写的,你说这个有可能是没有看到打开这个博客。 样式介绍 给大
本篇文章主要探讨盒模型,以及内边距、边框、外边距的面试题与思考,也希望您能把您的思考和遇到的问题以评论的方式补充下,后期,我将会补充到文章中 第一问:什么是盒模型? 可以说,页面就是由一个个盒模型堆砌
今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂。关键的是笔者有点懒,要写那么多div和css真是不想下手啊。多看了两眼,这布局不跟网格挺像吗?c
一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为&quot;弹性布局&quot;,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box
display的值及作用 display属性可以设置元素的内部和外部显示类型,元素的外部显示类型将决定该元素在流式布局中的表现,例如块级或内联元素,元素的内部显示类型可以控制其子元素的布局,例如gri
如何避免FOUC FOUC即无样式内容闪烁也可以称为文档样式短暂失效,主要就是指HTML已加载而样式表并未加载,此后样式表再加载而产生的闪烁现象。 样式表前置 根据浏览器渲染的顺序,将CSS在&amp
CSS3新特性 是最新的 标准,旨在扩展 。 圆角 通过 属性可以给任何元素制作圆角。 : 所有四个边角 属性的缩写。 : 定义了左上角的弧度。 : 定义了右上角的弧度。 : 定义了右下角的弧度。 :
CSS引入方式 将 作用到 主要有四种方式,分别为 元素添加内联样式、` 特点 与`HTML HTTP`请求 适合于动态样式,对于不同的用户从数据库加载不同样式嵌入到页面 不足 嵌入样式不能被浏览器缓
CSS选择器 每日更新前端基础,如果觉得不错,点个star吧 &#128515; https://github.com/WindrunnerMax/EveryDay 使用 对`HTML`页面中的元素实
CSS常用单位 CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax,按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比