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

1，先看效果：

css样式以及html：

 .div{

            width:200px;

            height:100px;

            background:linear-gradient(to right , red 0%, red 50%, black 50%, black **** );

        }

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

        }