Как присвоить ссылки цветным полосам на резиновом фоне?

#html #css

                    
Как присвоить ссылки резиновому фоновому изображению, где полоса цветная и будет ссылкой.

Высота задаётся за счёт свойства width: 10%; соседнего блока, она и образует высоту
всего блока в котором находится квадрат и цветные полосы. Но не получается сделать
так, чтобы полосы становились той же высоты.



    
        
    
    
    
    
    
 




Получается логотип выстраивает свою высоту из процента ширины страницы. Контейнеры
в которых он находится выстраивают высоту по нему. Но то, что рядом с логотипом почему-то
не получается задать высоту контейнера в котором они находятся.
    

Ответы

Ответ 1

Cделать ссылку, затем трансформировать её.
Дополнено: резиновые  %-ные значения.



a {
  width: 20%;
  height: 60px;
  transform: skew(-45deg);
  display:block;
  float: left;
}
a {
  
}

a:nth-child(1) {
  background-color: red;
}
a:nth-child(2) {
  background-color: blue;
}
a:nth-child(3) {
  background-color: green;
}
a:nth-child(4) {
  background-color: tomato;
}
a:nth-child(5) {
  background-color: yellow;
}
div {
  width: 90%;
  margin: 0 30px;
}
>