Теория
Теория

Испытание: флаги

В этом испытании вам предстоит воспроизвести 6 государственных флагов разных стран.

Используемые цвета указаны в CSS.

Несколько подсказок, чтобы не гадать:

почти все пропорции цветов и углы наклона указаны в градусах и кратны 5;
пропорции цветов у Ирландии кратны 3;
ширина белых полосок у Тринидада составляет 3%, а чёрной 14%;

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 505px;
  height: 260px;
  padding-top:30px;
  padding-left:15px;
}

.flag {
  float: left;
  width: 150px;
  height: 100px;
  margin-right: 15px;
  margin-bottom: 30px;
  background-color: #ffffff;
  border: 1px solid #aaaaaa;
}

.ireland {
  background-image: -webkit-linear-gradient(left, #009b48 33%, #ffffff 33%, #ffffff 66%, #ff7900 66%);
  background-image: linear-gradient(to right, #009b48 33%, #ffffff 33%, #ffffff 66%, #ff7900 66%);
}

.trinidad {
  background-image: -webkit-linear-gradient(45deg, #ce1126 40%, #ffffff 40%, #ffffff 43%, #000000 43%, #000000 57%, #ffffff 57%, #ffffff 60%, #ce1126 60%);
  background-image: linear-gradient(45deg, #ce1126 40%, #ffffff 40%, #ffffff 43%, #000000 43%, #000000 57%, #ffffff 57%, #ffffff 60%, #ce1126 60%);
}

.congo {
    background-image: -webkit-linear-gradient(315deg, #009543 40%, #fbde4a 40%, #fbde4a 60%, #dc241f 60%);
    background-image: linear-gradient(135deg, #009543 40%, #fbde4a 40%, #fbde4a 60%, #dc241f 60%);
}

.mauritius {
    background-image: -webkit-linear-gradient(#eA2839 25%, #1a206d 25%, #1a206d 50%, #ffd500 50%, #ffd500 75%, #00a551 75%);
    background-image: linear-gradient(#ea2839 25%, #1a206d 25%, #1a206d 50%, #ffd500 50%, #ffd500 75%, #00a551 75%);
}

.botswana {
  background-image: -webkit-linear-gradient(#449ED3 30%, #ffffff 30%, #ffffff 35%, #000000 35%, #000000 65%, #ffffff 65%, #ffffff 70%, #449ed3 70%, #449ed3 100%);
  background-image: linear-gradient(#449ed3 30%, #ffffff 30%, #ffffff 35%, #000000 35%, #000000 65%, #ffffff 65%, #ffffff 70%, #449ed3 70%, #449ed3 100%);
}

.madagaskar {
  background-image: -webkit-linear-gradient(#fc3d32 50%, #007e3a 50%);
  background-image: linear-gradient(#fc3d32 50%, #007e3a 50%);
  background-position: 50px 0;
  background-repeat: no-repeat;
}

Минимальный вид табов

index.html

HTML

Испытание: флаги

Притормози, дружище