用 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。