css实现三角,对勾

最新推荐文章于 2023-11-15 15:28:13 发布

༺༒新版の小胖纸༒༻

最新推荐文章于 2023-11-15 15:28:13 发布

阅读量1.5k

点赞数 2

本文链接：https://blog.csdn.net/weixin_45309872/article/details/94624634

版权

在这里插入图片描述

CSS部分

<style>
        /* 外框 */

        #outSide {
            position: relative;
            width: 100px;
            height: 28px;
            border: 1px solid #999999;
            text-align: center;
            line-height: 28px;
            cursor: pointer;
        }

        /* 三角形 */

        #div6 {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 0;
            height: 0;
            border: 11px solid #CCCCCC;
            border-left: 11px solid transparent;
            border-top: 11px solid transparent;
        }

        /* 对号 */

        .check {
            position: relative;
            display: inline-block;
            width: 25px;
            height: 25px;
            border-radius: 25px;
        }

        .check::after {
            content: "";
            position: absolute;
            left: -2px;
            top: 0px;
            width: 40%;
            height: 22%;
            border: 2px solid #fff;
            border-radius: 1px;
            border-top: none;
            border-right: none;
            background: transparent;
            transform: rotate(-45deg);
        }
    </style>

HTML部分

<div id="outSide" onclick="handleBackground()">
        &yen;100,000
        <div id="div6">
            <span class="check"></span>
        </div>
    </div>

JS部分

 <script>

        function handleBackground() {
            document.getElementById('outSide').style.cssText = "border: 1px solid #3888FF;"
            document.getElementById('div6').style.cssText = "border: 11px solid #3888FF; border-left: 11px solid transparent; border-top: 11px solid transparent;"
        }

    </script>