html, body {

  width: 100%;

  height: 100%;

  display: flex;

}

​

div {

  width: 100px;

  height: 100px;

  margin: auto;

}

​

.normal {

  background: linear-gradient(45deg, deeppink, yellowgreen);

}

​

.gradient{

  background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 1px);

}

​

.rotate {

  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);

}

​

.top {

  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);

  transform: rotate(135deg);

}

​

.left {

  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);

  transform: rotate(45deg);

}

​

.bottom {

  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);

  transform: rotate(-45deg);

}

​

.right {

  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);

  transform: rotate(-135deg);

}