html中切角文本框,HTML/CSS实现切角矩形效果

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

HTML：

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;

}