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>