问题背景：
做一个提醒弹窗。设计图下面有一个x的敞开按钮，在图标库没找到适合的，开始为了偷懒用的字母x，起初ui说看起来怪怪的。没方法只有依据设计图一比一的画一个。
实现：
采纳::after和 ::before 伪元素。
这里交叉一个小知识点
伪元素：是在内容元素前后插入一个额定的元素。这些元素在文档源中不可见，然而在显示中可见。
伪类：比方hover 等非凡交互行为
dom构造：
<body> <div class="box"> <div> content </div> <div class="mask"></div> <div class="dialog"> <div class="close"></div> </div> </div></body>款式：
<style> * { margin: 0; padding: 0; } .box { width: 100vw; height: 0; } .mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; opacity: 0.5; background-color: #000; } .dialog { position: fixed; bottom: 0; width: 100vw; height: 40vh; background-color: #fff; z-index: 1000; border-radius: 4vw 4vw 0 0; padding-top: 3vw; } .close { position: absolute; right: 4vw; width: 4vw; height: 4vw; line-height: 4vw; text-align: center; color: #222; } .close:before { position: absolute; content: ''; width: 0.8vw; height: 4vw; background: #222; transform: rotate(45deg); top: calc(50% - 0.45vw); left: 50%; } .close:after { content: ''; position: absolute; width: 0.8vw; height: 4vw; background: #222; transform: rotate(-45deg); top: calc(50% - 0.45vw); left: 50%; } </style>最终成果：