css绘制带箭头对话框

来源：互联网发布：java内嵌webkit浏览器编辑：程序博客网时间：2024/04/29 00:19

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Test</title>    <style>        .tip {            position: relative;            background-color: deepskyblue;            margin: 20px auto;            width: 246px;            height: 43px;            line-height: 43px;            color: white;            text-align: center;            border-radius: 10px;            font-family: sans-serif;        }        .tip:after {            content: '';            position: absolute;            width: 0;            height: 0;            border: 8px solid;        }        .top:after {            border-bottom-color: deepskyblue;            left: 50%;            bottom: 100%;            margin-left: -15px;        }        .right:after {            border-left-color: deepskyblue;            left: 100%;            top: 50%;            margin-top: -7px;        }        .bottom:after {            border-top-color: deepskyblue;            top: 100%;            left: 50%;            margin-left: -15px;        }        .left:after {            border-right-color: deepskyblue;            top: 50%;            right: 100%;            margin-top: -9px;        }    </style></head><body>    <div class="tip top">top</div>    <div class="tip bottom">bottom</div>    <div class="tip left">left</div>    <div class="tip right">right</div></body></html>

效果图：
这里写图片描述

0 0