1.效果
2.源码
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> ???<style type="text/css"> ???????#confirm{ ???????????position: absolute; ???????????z-index: 1; ???????????display: inline-block; ???????????border: 1px solid black; ???????????background-color: gray; ???????????width: 50px; ???????????height:40px; ???????????border-radius: 10px; ???????????-webkit-box-shadow: 3px 3px 3px #adadad; ???????????-moz-box-shadow: 3px 3px 3px #adadad; ???????????box-shadow: 3px 3px 3px #adadad; ???????????text-align: center; ???????????line-height: 40px; ???????????color: red; ???????} ???????#triangle{ ???????????position: absolute; ???????????z-index: 2; ???????????top: 44px; ???????????left: 26px; ???????????display: inline-block; ???????????border-bottom:1px solid black; ???????????border-right:1px solid black; ???????????background-color: gray; ???????????width: 10px; ???????????height:10px; ???????????-webkit-transform: rotateZ(45deg); ???????????-moz-transform: rotateZ(45deg); ???????????-ms-transform: rotateZ(45deg); ???????????-o-transform: rotateZ(45deg); ???????????transform: rotateZ(45deg); ???????????-webkit-box-shadow: 3px 3px 3px #adadad; ???????????-moz-box-shadow: 3px 3px 3px #adadad; ???????????box-shadow: 3px 3px 3px #adadad; ???????} ???</style></head><body><div id="confirm">提示</div><div id="triangle"></div></body></html>CSS自定义消息提示
原文地址：https://www.cnblogs.com/zhuwenqi2016/p/8718013.html