CSS Square with 4 color

css squares

by aanita0309

HTML

<!-- Draw Square -->
<div class="square">

</div>

CSS

.square {
  width: 200px;
  height: 200px;
  /* Creating 4 equal square */
  background: linear-gradient(45deg, blue, blue), linear-gradient(45deg, green, green), linear-gradient(45deg, yellow, yellow), linear-gradient(45deg, red, red);
  background-size: 50% 50%;
  background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
  background-repeat: no-repeat;
  /* transform */
  transform: rotate(45deg);
}