Draw divided coloured squares with css

Using this css I can draw a small coloured square with a black border:

.row {    display : flex;    justify-content: center;    align-items : center;    margin-bottom: 5px;  }  .box {    height: 20px;    width: 20px;    border: 1px solid black;    border-radius: 0;    margin-right : 5px;  }    /* Canada */  .canada {    background: #FF0000;    color: white;    text-align: center;  }  

How can I use similar css to draw:

• A square horizontally divided into two colors

• A square vertically divided into 2/3 and 1/3

https://stackoverflow.com/questions/67040842/draw-divided-coloured-squares-with-css April 11, 2021 at 10:06AM