使用 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;  
}

预览效果如图所示: