深圳css实现div一半是黑色，一半是红色；实现三角形效果

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);

}