用css实现三角形效果

最新推荐文章于 2024-06-19 14:48:22 发布

xuhf3150

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量353

点赞数

分类专栏：软件开发文章标签：三角形css 提示框

本文链接：https://blog.csdn.net/xuhf3150/article/details/77650605

版权

软件开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网页开发中经常遇到一些很小的三角形修饰，提示框箭头方向等问题，下面记录下自己开发过程中用到的一些css样式。

一、用css实现小三角形效果

提到小三角形，很多人可能直接使用图片，使用图片的缺点就是要调整大小或颜色或箭头方向时不太方便，这里介绍一个使用css样式实现的小三角形效果，要修改成自己想要的效果非常方便。

先在 html 代码里定义一个 <i> 标签，定义 class 属性，

例如：<i class="triangle"></i>

然后定义 class 样式：.triangle{

position:absolute;

display:inline-block;
border-top:5px solid transparent;

border-right:5px solid transparent;

border-bottom:5px solid #3BA2EB;

border-left:5px solid transparent;

top:9px;

right:16px;

}

样式说明：position:absolute; top:9px; right:16px;这几个样式是因为定位问题要使用到的样式，因为在实际应用中，小三角形图标一般是依附在父节点的旁边作修饰作用的，所以一般会使用到定位。

这里是使用边框样式来制作一个小三角形，border-bottom:5px solid #3BA2EB; 底边框正常显示，左、右、上的边框都是透明的，看不见的，最终展现的效果就是一个箭头向上的小三角形，如图所示：。如果你对这个有兴趣的话，可以自己尝试修改一下边框宽度、箭头方向、边框颜色等看下实际效果。

二、用三角形原理实现提示框

根据上面的三角形原理可以制作出各种方向的提示框，效果如下：

代码粘上如下：

<!doctype html>
<html>
	<head>
	<meta  http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>提示框示例</title>
	<style>
		*{margin:0;padding:0;}
		html,body{height:100%;}
		body{font-size:14px;font-family:"微软雅黑"}
		.content{width:100%;height:100%;position:relative;}
		.tips{display:inline-block;width:200px;height:30px;border:1px solid #FE9898;border-radius:4px;line-height:22px;padding:5px;}
		.tips .tipsDirec{width:0px;height:0px;border-width:10px;border-style:solid;}
		/*向上方向*/
		#topTipFrame{position:absolute;top:100px;left:100px;}
		#topDirec1{position:absolute;top:-20px;left:11px;border-color:transparent transparent #FE9898 transparent;}
		#topDirec2{position:absolute;top:-19px;left:11px;border-color:transparent transparent #fff transparent;}
		
		/*向右方向*/
		#rightTipFrame{position:absolute;top:100px;left:500px;}
		#rightDirec1{position:absolute;top:11px;right:-20px;border-color:transparent transparent transparent #FE9898;}
		#rightDirec2{position:absolute;top:11px;right:-19px;border-color:transparent transparent transparent #fff;}
		
		/*向下方向*/
		#downTipFrame{position:absolute;top:240px;left:100px;}
		#downDirec1{position:absolute;bottom:-20px;left:11px;border-color:#FE9898 transparent transparent  transparent;}
		#downDirec2{position:absolute;bottom:-19px;left:11px;border-color:#fff  transparent transparent transparent;}
		
		/*向左方向*/
		#leftTipFrame{position:absolute;top:240px;left:500px;}
		#leftDirec1{position:absolute;left:-20px;top:11px;border-color:transparent #FE9898 transparent transparent;}
		#leftDirec2{position:absolute;left:-19px;top:11px;border-color:transparent #fff transparent transparent;}
		
		
	</style>
	</head>
	<body>
		<div class="content">
			<!--方向向上提示框 start -->
			<div id="topTipFrame" class="tips">
				<span id="topDirec1" class="tipsDirec"></span>
				<span id="topDirec2" class="tipsDirec"></span>
				箭头向上提示框示例
			</div>	
			<!--方向向上提示框 end -->
			<!--方向向右提示框 start -->
			<div id="rightTipFrame" class="tips">
				<span id="rightDirec1" class="tipsDirec"></span>
				<span id="rightDirec2" class="tipsDirec"></span>
				箭头向右提示框示例
			</div>	
			<!--方向向右提示框 end -->
			<!--方向向下提示框 start -->
			<div id="downTipFrame" class="tips">
				<span id="downDirec1" class="tipsDirec"></span>
				<span id="downDirec2" class="tipsDirec"></span>
				箭头向下提示框示例
			</div>	
			<!--方向向下提示框 end -->
			<!--方向向左提示框 start -->
			<div id="leftTipFrame" class="tips">
				<span id="leftDirec1" class="tipsDirec"></span>
				<span id="leftDirec2" class="tipsDirec"></span>
				箭头向左提示框示例
			</div>	
			<!--方向向左提示框 end -->
		</div>
	</body>
</html>

以上代码css部分很多代码重复了，后面实际需要的时候可以进行重构优化。

可以设置三角形边框的width height 不同值设置不规则的三角形状，制作出不规则的提示箭头等，但是自己做出的效果会在有些浏览器展示出锯齿效果，不规则的箭头还是没有图片稳定。

好了，用css实现三角形效果就暂时写到这里了，希望在后面的工作学习中可以帮到自己或者别人。

xuhf3150

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用css实现三角形效果

网页开发中经常遇到一些很小的三角形修饰，提示框箭头方向等问题，下面记录下自己开发过程中用到的一些css样式。一、用css实现小三角形效果提到小三角形，很多人可能直接使用图片，使用图片的缺点就是要调整大小或颜色或箭头方向时不太方便，这里介绍一个使用css样式实现的小三角形效果，要修改成自己想要的效果非常方便。先
复制链接

扫一扫

专栏目录