css实现缺少一角的div

最新推荐文章于 2023-04-18 16:46:15 发布

jiabinleo

最新推荐文章于 2023-04-18 16:46:15 发布

阅读量2.2k

点赞数

文章标签： css 定位 html css3 html5

本文链接：https://blog.csdn.net/weixin_38242636/article/details/109746370

版权

先建一个div，设置宽高背景色后，给需要删除一角的div增加一个伪类，将伪类设置成跟背景色一样的颜色，然后旋转45度，开启定位，定位到需要去除的那个角就完成了（其实是只是将那个角盖住而已）

<body>
    <div class="box"></div>
</body>

.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-image: linear-gradient(90deg, #333333, #666666, #999999);
    overflow: hidden;

    &::before {
        position: absolute;
        content: "";
        width: 100px;
        height: 100px;
        right: -50px;
        top: -50px;
        z-index: 100;
        background-color: #ffffff;
        transform: rotateZ(45deg);
    }
}

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jiabinleo

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css实现缺少一角的div

先建一个div，设置宽高背景色后，给需要删除一角的div增加一个伪类，将伪类设置成跟背景色一样的颜色，然后旋转45度，开启定位，定位到需要去除的那个角就完成了（其实是只是将那个角盖住而已）<body> <div class="box"></div></body>.box { position: relative; width: 200px; height: 200px; background-image: lin
复制链接

扫一扫