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

1，先看效果：

css样式以及html：

 .div{
            width:200px;
            height:100px;
            background:linear-gradient(to right , red 0%, red 50%, black 50%, black 100% );
        }
 <div class="div"></div>

2，三角形效果：

css以及html:

  .div2{
            width:200px;
            height:200px;
            background: linear-gradient(135deg,transparent 50%,red 50%);
        }
<div class="div2"></div>

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;
        }
<div class="div3"></div>

3.2

 

  .div2{
            width:200px;
            height:200px;
            background: linear-gradient(135deg,transparent 50%,red 50%);
            /* 角度旋转 */
            transform:rotate(15deg); 
        }