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>

CSS画简单易用的标签

HappyCodingTop

引用和评论

早已忘却的面试题，需要在隆冬忆起

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

盘点CSS文本两端对齐的N种方式