如何利用css写三角形
今天遇到一个文字提示框,之前用elementui可以直接使用Tooltip 组件,突然想不起来怎么手写样式。然后就去网上找资料总结一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.app{
width: 100%;
max-width: 1200px;
margin: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.filed{
position: relative;
padding: 50px;
}
button{
padding: 20px 60px;
border: none;
outline: none;
background: #47b8e0;
transition: 0.15s ease-in-out;
color: white;
text-decoration: none;
border-radius: 5px;
display: inline-block;
}
.tooltip-button:hover + .tooltip,
.tooltip-button:focus + .tooltip,
.tooltip-button.hover + .tooltip{
opacity: 1;
pointer-events: inherit;
}
.tooltip{
display: block;
position: absolute;
top: 0px;
left: 23%;
border: 1px solid rgba(46, 196, 182, 0.75);
border-radius: 5px;
padding: 10px 30px;
background-color:rgba(46, 196, 182, 0.75);
color: #fff;
opacity: 0;
z-index: 1;
text-align: center;
}
.tooltip:hover {
opacity: 1;
pointer-events: inherit;
}
.tooltip::after{
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
bottom: -11px;
left: 50%;
border: 5px solid transparent;
border-top: 5px solid rgba(46, 196, 182, 0.75);
}
</style>
</head>
<body>
<div class="app">
<div class="filed">
<button class="tooltip-button">消息提示在上方</button>
<span class="tooltip">这是提示消息</span>
</div>
</div>
</div>
</body>
</html>
效果图