
1,先看效果:
css樣式以及html:
.div{
width:200px;
height:100px;
background:linear-gradient(to right , red 0%, red 50%, black 50%, black 100% );
}
2,三角形效果:
css以及html:
.div2{
width:200px;
height:200px;
background: linear-gradient(135deg,transparent 50%,red 50%);
}
3.1三角形效果的其他實現方法:
.div3{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #ff0000;
}
3.2
.div2{
width:200px;
height:200px;
background: linear-gradient(135deg,transparent 50%,red 50%);
/* 角度旋轉 */
transform:rotate(15deg);
}
【版權聲明】:本站內容來自于與互聯網(注明原創稿件除外),供訪客免費學習需要。如文章或圖像侵犯到您的權益,請及時告知,我們第一時間刪除處理!謝謝!