Подскажите почему у меня текст который написан вертикально, не имеет полную заливку фона цвета?
Изменил верстку... на более адекватную наверно... Но вот с фоном так и не могу разобраться. Что не так
CODE ( html):
скопировать код в буфер обмена
<style> .slide-container { display: flex; background-color: #fff; min-height: 100px; padding: 59px 100px; } .gray { background-color: #EBEBEB; } .blue { background-color: #00AEEF; color: #fff; } .s-name { margin-left: 10px; width: 58px; max-height: 58px; line-height: 58px; text-align: center; } .icon { position: absolute; z-index: 3; cursor: pointer; width: 58px; max-height: 58px; transition: all .25s ease; } .s-content { position: relative; top: 0; width: 100%; transform: rotate(90deg); white-space: nowrap; z-index: -1; opacity: 0; transition: all 1s ease; } .icon:hover { max-height: 100%; } .s-name:hover .s-content { opacity: 1; top: 58px; z-index: 2; } </style> <div class="slide-container"> <div class="s-name"> <div class="icon gray">1</div> <div class="s-content gray">Slide 1 contents</div> </div> <div class="s-name"> <div class="icon gray">2</div> <div class="s-content gray">Slide 2 contents</div> </div> <div class="s-name"> <div class="icon gray">3</div> <div class="s-content gray">Slide 3 contents</div> </div> <div class="s-name"> <div class="icon blue">4</div> <div class="s-content blue">Slide 4 contents</div> </div> </div>
старый вариант
Спойлер (Отобразить)CODE ( html):
скопировать код в буфер обмена
<style> .slide-container { background-color: #fff; min-height: 100px; padding: 0 100px; } .s-name { position: absolute; display: inline-block; width: 58px; height: 100%; padding: 20px 0; white-space: nowrap; transform: rotate(90deg); } .gray { position: relative; background-color: gray; } .blue { position: relative; background-color: #00AEEF; } </style> <div class="slide"> <div class="s-name gray"> 1 <span>Slide 1 contents</span> </div> <div class="s-name gray"> 2 <span>Slide 2 contents</span> </div> <div class="s-name gray"> 3 <span>Slide 3 contents</span> </div> <div class="s-name blue"> 4 <span>Slide 4 contents</span> </div> </div>
результат этого кода на картинке...
Прикреплено изображение (Нажмите для увеличения)
(Отредактировано автором: 21 Октября, 2017 - 15:04:07)
|