用 css 实现提示框的箭头

时间 2019-11-10

标签 css 实现提示箭头栏目 CSS 繁體版

原文原文链接

用 css 实现提示框上增长箭头css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{font-size: 16px;}
        form{
            position: relative;
        }
        input{
            width: 10em;
            padding: 0.3em 0.8em;
            border: 1px solid #ff7d00;
            border-radius: .2em;
            font-size: 125%;
            line-height: 1.5;
        }
        .callout{
            position: relative;
            width: 15.5em;
            font-size: 90%;
            line-height: 1.5;
            padding: .3em;
            border-radius: .2em;
            border:1px solid #ff7d00;
            margin-top: 10px;
            background: #e2c179;
        }
        .callout:before{/*给提示框描画出箭头*/
            content: "";
            position: absolute;
            top: -.41em;
            left: 1em;
            padding: .35em;/*画一个高为0.7em的正方形*/
            background: inherit;/*背景色和边框继承提示框的*/
            border: inherit;
            border-right: 0;/*去掉右和下边框*/
            border-bottom: 0;
            transform: rotate(45deg);/*旋转45度*/
        }
    </style>
</head>
<body>
    <form>
        <input type="text" placeholder="请输入您的姓名">
        <div class="callout">
            请输入大于三个字符小于10个字符的正确的名字
        </div>
    </form>
</body>
</html>

这个方法最酷的地方不只是用纯 css 画出了小箭头，还有就是小箭头的背景和边框用了继承，因此后期即便要修改提示框的背景也很方便，之前竟然用图片实现，想一想工做量简直巨大。html