css画三角形的变形

最新推荐文章于 2021-11-26 21:09:28 发布

加鸡腿

最新推荐文章于 2021-11-26 21:09:28 发布

阅读量352

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_43437571/article/details/88771951

版权

css 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

先看效果图：
在这里插入图片描述

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            float: left;
            position: relative;
            left: 0;
            top: 0;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: skyblue;
            border:1px solid #fff;
        }
        .box1 span {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            background-color: #fff;
            border-width: 7px; /* 这个宽度要和盒子的宽度相配合 */
            border-style: solid;
            border-color:transparent skyblue skyblue transparent;
            /* 这里的透明颜色是缺的角，天蓝色是和盒子的背景颜色一样的颜色 */
        }

        .box2 {
            float: left;
            position: relative;
            left: 0;
            top: 0;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: skyblue;
            border:1px solid #fff;
        }
        .box2 span {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 0;
            height: 0;
            background-color: #fff;
            border-width: 7px;
            border-style: solid;
            border-color:skyblue transparent transparent skyblue;
        }
    </style>

<body>
    <div class="box1">
        区/县
        <span></span>
    </div>
    <div class="box2">
        海淀区
        <span></span>
    </div>
</body>