CSS畫簡單易用的標籤

時間 2020-03-30

標籤 css 簡單易用標籤欄目 CSS 简体版

原文原文鏈接

<!doctype html>

<html>

<head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
    <style>
        /* S 頁面列表佈局樣式 */
        main {
            max-width: 600px;
            margin: 0 auto;
        }

        .item-wrap {
            display: inline-block;
            margin-right: 50px;
        }

        .item-list {
            position: relative;

            width: 200px;
            height: 250px;
            box-shadow: 0 0 5px #ccc;
        }

        /* E 頁面列表佈局樣式 */

        /* S 水平方向的標籤 */
        .tag-horizontal {
            position: absolute;
            background: #00cd32;
            padding: 0 5px;
            display: flex;
            align-items: center;
            height: 26px;
            color: #fff;
        }

        .tag-horizontal::after {
            content: "";
            position: absolute;
            left: 100%;
            top: 0;
            border-color: #00cd32 transparent #00cd32 #00cd32;
            border-width: 13px 13px 13px 0;
            border-style: solid;
        }

        /* E 水平方向的標籤 */


        /* S 垂直方向的標籤 */
        .tag-vertical {
            float: left;
            /*水平方向放多個的設置*/
            margin-right: 2px;
            /*水平方向放多個的設置*/
            position: relative;
            padding: 5px 0;
            width: 26px;
            color: #fff;
            text-align: center;
        }

        .tag-vertical::after {
            position: absolute;
            content: "";
            left: 0;
            top: 100%;
            border-style: solid;
            border-width: 0 13px 13px 13px;
        }

        /*可設置不一樣顏色*/
        .tag-vertical.discount::after {
            border-color: #00d9a9 #00d9a9 transparent #00d9a9;
        }

        .tag-vertical.discount {
            background: #00d9a9;
        }

        /* E 垂直方向的標籤 */
    </style>
</head>

<body>
    <main>
        <h1>CSS畫標籤</h1>
        <div class="item-wrap">
            <h2>水平方向的標籤</h2>
            <div class="item-list">
                <div class="tag-horizontal">-30%</div>
            </div>
        </div>
        <div class="item-wrap">
            <h2>垂直方向的標籤</h2>
            <div class="item-list">
                <div class="tag-vertical discount">新品</div>
            </div>
        </div>
    </main>
</body>

</html>

相關標籤/搜索

每日一句

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