CSS自定义消息提示

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自定义消息提示

最新文章

热门文章
