怎么用纯CSS制作带小三角的tooltip提示框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么用纯CSS制作带小三角的tooltip提示框相关的知识，希望对你有一定的参考价值。
使用CSS制作小三角形实际就是通过控制块元素的边框来实现的。
例如：
<style>
.triangle-up
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
.triangle-down
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
.triangle-left
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
.triangle-right
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
</style>
<div class='triangle-down'></div> <!--向下三角形-->
<div class='triangle-up'></div> <!--向上三角形-->
<div class='triangle-left'></div> <!--向左三角形-->
<div class='triangle-right'></div> <!--向右三角形-->
原理就是设置块元素的三条边透明掉（tranparent）
参考技术A 以上的效果完全是用 css 来实现的，那么是怎么实现的呢？我们知道 html 中有一些特殊的字符，具体的请点击 HTML特殊字符大全。
通过特殊字符，利用 css 中的 margin 或者 position
方法完全可以实现以上效果。
复制代码
代码如下:
<!DOCTYPE HTML>
<html
lang="en-US">
<head>
<meta charset="UTF-8">
<title>字符制作三角边框</title>
<style type="text/css">
*margin:0;padding:0;
bodyfont-family:SimSun;
h1text-align:center;
.demo1width:300px;margin:20px auto;border:1px
solid red;height:100px;
.demo1 em,.demo1
spandisplay:block;width:30px;height:16px;font-size:30px;overflow:hidden;_position:relative;margin-left:10px;
.demo1 emmargin-top:-16px;color:red;font-style:normal;
.demo1
spanmargin-top:-14px;color:white;
.demo2width:300px;border:1px solid
#F00;height:100px;position:relative;margin-left:auto;margin-right:auto;
.demo2 em,.demo2
spanfont-style:normal;font-size:30px;position:absolute;left:-16px;top:40px;color:red;
.demo2 spanleft:-14px;color:white;
</style>
</head>
<body>
<h1>demo1 是用 margin 方法</h1>
<div
class="demo1">
<em>◆</em>
<span>◆</span>
</div>
<h1>demo2 是用
position 方法</h1>
<div class="demo2">
<em>◆</em>
<span>◆</span>
</div>
</body>
</html>
PS：除了用字符可以实现三角，我们还可以利用 border 来实现三角。本回答被提问者和网友采纳
以上是关于怎么用纯CSS制作带小三角的tooltip提示框的主要内容，如果未能解决你的问题，请参考以下文章
Web前端面试指导(十八)：用纯CSS创建一个三角形的原理是什么？
Web前端面试指导(十八)：用纯CSS创建一个三角形的原理是什么？