您的位置：首页 > Web前端 > CSS

用css实现三角形效果

2017-08-28 16:42 274 查看

网页开发中经常遇到一些很小的三角形修饰，提示框箭头方向等问题，下面记录下自己开发过程中用到的一些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实现三角形效果就暂时写到这里了，希望在后面的工作学习中可以帮到自己或者别人。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 三角形css 提示框

相关文章推荐

新的分享

章节导航