Можно ли разместить в сектора кругового меню адаптивные изображения?
Пример кода кругового меню: http://codepen.io/Fess/pen/adOgRN?editors=110
.circle-menu li {
position: absolute;
top: -50%;
left: -50%;
width: 100%;
height: 100%;
transform-origin: 100% 100%;
overflow: hidden;
background: red;
}
.circle-menu li:nth-child(1) {
transform: rotate(0deg) skew(30deg);
}
.circle-menu li:nth-child(2) {
transform: rotate(60deg) skew(30deg);
}
.circle-menu li:nth-child(3) {
transform: rotate(120deg) skew(30deg);
}
.circle-menu li:nth-child(4) {
transform: rotate(180deg) skew(30deg);
}
.circle-menu li:nth-child(5) {
transform: rotate(240deg) skew(30deg);
}
.circle-menu li:nth-child(6) {
transform: rotate(300deg) skew(30deg);
}
.circle-menu li a {
display: block;
width: 60%;
height: 60%;
margin-top: 54%;
margin-left: 54%;
background: black no-repeat 50% 40%;
transform: skew(-30deg) rotate(-60deg);
transition: background-color 0.5s;
}
.circle-menu li a:hover {
background-color: red;
}
.circle-menu li:nth-child(1) a {
background: pink;
}
.circle-menu li:nth-child(1):hover a {
background: red;
}
.circle-menu li:nth-child(2) a {
background: blue;
}
.circle-menu li:nth-child(3) a {
background: blue;
}
.circle-menu li:nth-child(4) a {
background: blue;
}
.circle-menu li:nth-child(5) a {
background: blue;
}
.circle-menu li:nth-child(6) a {
background: blue;
}
background: url(...
+background-size: cover;