JS Bin

/* 背景圖片實現(xiàn) */

.background-box {

width: 400px;

height: 100px;

/* 透明色替換為當(dāng)前背景底色 */

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

background-size: 50% 50%;

background-repeat: no-repeat;

}

/* 邊框?qū)崿F(xiàn) */

.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; /*顏色替換為當(dāng)前卡片底色*/

border-left: 50px solid transparent;

}

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

總結(jié)

以上是生活随笔為你收集整理的html怎么填充颜色渐变,CSS实现不规则图形，填充渐变色的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。