JS Bin

/* 背景图片实现 */

.background-box {

width: 400px;

height: 100px;

/* 透明色替换为当前背景底色 */

background:linear-gradient(-135deg, transparent 50px, red , yellow) top right;

background-size: 50% 50%;

background-repeat: no-repeat;

}

/* 边框实现 */

.border-box {

width: 100px;

height: 50px;

background: linear-gradient(#e66465, #9198e5);

position: relative;

}

.border-box::after {

position: absolute;

content: "";

right: 0;

top: 0,

width: 0;

height: 0;

border-bottom: 50px solid transparent;

border-right: 50px solid #FFF; /*颜色替换为当前卡片底色*/

border-left: 50px solid transparent;

}

原文：https://www.cnblogs.com/Lewiskycc/p/12809139.html