css border属性达成一个全兼容三角形代码
发布时间：2022-04-20 09:11:07 所属栏目：语言 来源：互联网
导读：在前端发开过程中，为了网站页面的美观，很多人都会使用小三角形来做下拉提示。那么这个三角形的下拉提示要怎么实现呢？其实最简单的方式就是用图片，但是使用图片的缺点就是修改空间小，而且网站图片过多，网站用户体验也不好，因此我们可以用CSS图标来实现
|
在前端发开过程中，为了网站页面的美观，很多人都会使用小三角形来做下拉提示。那么这个三角形的下拉提示要怎么实现呢？其实最简单的方式就是用图片，但是使用图片的缺点就是修改空间小，而且网站图片过多，网站用户体验也不好，因此我们可以用CSS图标来实现。CSS图标的优点就是能够方便的修改图标大小和颜色等。 css实现三角形图标已不是什么新鲜技术，之前也有很多相关的技术文章，这篇文章主要是分析下在实际场景中使用时遇到的问题以及如何回避这些问题。 基本原理大同小异，这里主要介绍利用css border（当然还可以使用css3的旋转技术实现，由于兼容性问题这里不涉及了）。 css border实现 一个div或者元素的border并不是我们直观意义上的一条有高度的线，而是一个等高梯形或者三角形（宽高为0时），可以看一下效果： div定义： <div class="arrow1"></div> css: .arrow1{ width: 0px; height:0px; border-width: 30px; border-style: solid; border-color: #007998 #47A447 #3C6AB9 #D2322D; 再看一下效果： 注：transparent 属性用来在 background 中将 background-color 选项设置为背景颜色透明 bingo!就是我们想要的效果，但是在ie6下杯具鸟！ 长长的大黑框，让人无法直视，这是因为ie6不支持transparent 透明属性，这时候我们可以将对应区域的border的样式设置为dashed，dashed在边框宽度很大时，会隐藏掉。css修改如下： .arrow1{ width: 0px; height:0px; border-width: 30px; border-style: solid; border-color: #007998 transparent transparent transparent; （编辑：常州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
