使用 CSS 实现弹窗三角
最近在做一个网站的聊天客服的需求,当在产品详情页面时,对话框上方会自动显示当前产品,用户可以直接发送这个产品的信息给 AI,如下图所示:
这里,按钮上方有一个指向这个弹窗的三角,那么如何通过 CSS 来实现这个三角呢,下面请看代码:
HTML 代码:
<h1>New Popup with Wrapper</h1>
<div class="popup arrow-top">
<div class="popup-wrapper">
<p>Popup/modal example</p>
<div>
</div>
CSS 代码:
* {
box-sizing: border-box;
}
body {
background: #EAEDF1;
margin: 80px 0;
text-align: center;
font-family: 'Montserrat', sans-serif;
}
/*
Popup
Arrows and dropshadows are applied to .popup. Text align is "centered." You'll probably want to set it to "left."
*/
.popup {
width: 400px;
margin: 0 auto;
position: relative;
text-align: center;
z-index: 999;
}
.popup:after {
content: "";
height: 100%;
width: 100%;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
box-shadow: 0 1px 14px rgba(0,0,0,.2);
}
.popup:before {
content: "";
width: 20px;
height: 20px;
transform: rotate(45deg);
box-shadow: 0 1px 14px rgba(0,0,0,.2);
background: #fff;
position: absolute;
z-index: 998;
}
/*
Different arrow positioning
*/
.popup.arrow-top:before {
left: calc(50% - 10px);
top: -8px;
}
.popup.arrow-right:before {
top: calc(50% - 10px);
right: -8px;
}
.popup.arrow-bottom:before {
left: calc(50% - 10px);
bottom: -8px;
}
.popup.arrow-left:before {
top: calc(50% - 10px);
left: -8px;
}
/*
Popup wrapper
This is where we add the white background and padding of the content within the popup
*/
.popup-wrapper {
width: 100%;
padding: 32px;
border-radius: 4px;
background: #fff;
position: relative;
z-index: 998;
}
预览效果如图所示: