HTML/CSS实现切角矩形效果_css长方形切角描边-CSDN博客

本文介绍了一种在非纯色背景下实现切角矩形效果的CSS技巧，通过使用线性渐变和伪元素来创建独特的视觉效果。文章详细解释了如何设置HTML结构和CSS样式，包括切角效果的实现、小三角装饰的添加以及切角矩形的描边。

非纯色背景下切角矩形的效果图如下：

HTML：

<div class="top-box">
    <div class="top-box-border"></div>                  
</div>

CSS：

.top-box {
    position: relative;
    display: block;
    width: 90%;
    min-height: 230px;
    margin: 0 auto 40px;
    padding: 0 10px 80px;
    background: #fff;
    background: linear-gradient(-135deg, transparent 20px, #FFF 0); //切角效果
    box-sizing: border-box;
}

/* 左下角小三角 */
.top-box:before, .top-box:after {
    position: absolute;
    left: -2px;
    bottom: -30px;
    display: inline-block;
    content: '';
    height: 0;
    border-left: 15px solid #0B113C;
    border-top: 15px solid #0B113C;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.top-box:after {
    left: 0;
    bottom: -26px;
    border-left: 15px solid #fff;
    border-top: 15px solid #fff;
}

/* 切角矩形描边 */
.top-box-border {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    content: '';
    background: #000;
    background: linear-gradient(-135deg, transparent 20px, #0B113C 0);
    z-index: -1;
}