怎么用纯CSS制作带小三角的tooltip提示框
发布网友
发布时间：2022-04-26 01:58
共2个回答
热心网友
时间：2022-04-06 12:15
使用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）
热心网友
时间：2022-04-06 13:33
以上的效果完全是用 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;}
body{font-family:SimSun;}
h1{text-align:center;}
.demo1{width:300px;margin:20px auto;border:1px
solid red;height:100px;}
.demo1 em,.demo1
span{display:block;width:30px;height:16px;font-size:30px;overflow:hidden;_position:relative;margin-left:10px;}
.demo1 em{margin-top:-16px;color:red;font-style:normal;}
.demo1
span{margin-top:-14px;color:white;}
.demo2{width:300px;border:1px solid
#F00;height:100px;position:relative;margin-left:auto;margin-right:auto;}
.demo2 em,.demo2
span{font-style:normal;font-size:30px;position:absolute;left:-16px;top:40px;color:red;}
.demo2 span{left:-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 来实现三角。
