Добрый день
Помогите с некоторыми модификациями css для требуемого функционала:
Сделал следующий пример: https://jsfiddle.net/4qkxs7a1/1/
.ib-outline {
width: calc(100% - 2 * 10px /*h-borders*/ - 2 * 10px /*h-margins*/);
max-width: 500px;
margin: 0px 10px 15px 10px;
border: 0px solid #ffffff;
box-shadow: 0px 0px 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);
}
.ib-storage {
position: relative;
width: 100%;
background: #ffffff;
}
.ib-storage-title {
display: inline-block;
vertical-align: top;
position: relative;
width: calc(100% - 100px - (2 * 2px) - (25px + 10px));
height: 50px;
line-height: 50px;
margin: 0px;
padding: 0px 10px 0px 25px;
text-align: left;
font-family: Verdana;
font-size: 20px;
border: 2px solid #0090d0;
border-right: 1px solid #0090d0;
background: #ffffff;
cursor: pointer;
}
.ib-storage-title:before,
.ib-storage-title:after {
content: '';
position: absolute;
width: 0px;
height: 0px;
}
.ib-storage-title:before {
top: -2px;
right: -16px;
border-bottom: 27px solid transparent;
border-top: 27px solid transparent;
border-left: 15px solid #0090d0;
}
.ib-storage-title:after {
top: 0px;
right: -14px;
border-bottom: 25px solid transparent;
border-top: 25px solid transparent;
border-left: 14px solid #ffffff;
}
.ib-storage-title:hover {
border: 2px solid #0090d0;
border-right: 2px solid #0090d0;
}
.ib-storage-title:hover:before {
top: calc(100% + 1px);
left: calc(50% - 27px);
border-left: 27px solid transparent;
border-right: 27px solid transparent;
border-top: 15px solid #0090d0;
}
.ib-storage-title:hover:after {
top: calc(100% - 1px + 1px);
left: calc(50% - 27px + 2px);
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 14px solid #ffffff;
}
.ib-content {
display: inline-block;
vertical-align: top;
width: calc(100px - 2 * 2px - 2 * 2px);
height: 50px;
line-height: 50px;
border: 2px solid red;
border-right: 1px solid red;
background: #ffffff;
}
.ib-content:before,
.ib-content:after {
content: '';
position: absolute;
width: 0px;
height: 0px;
}
.ib-content:before {
top: 0px;
right: -13px;
border-bottom: 27px solid transparent;
border-top: 27px solid transparent;
border-left: 15px solid red;
}
.ib-content:after {
top: 2px;
right: -11px;
border-bottom: 25px solid transparent;
border-top: 25px solid transparent;
border-left: 14px solid #ffffff;
}
Есть блок (ib-outline), содержащий еще один блок (ib-storage), внутри которого содержится 2 блока (ib-storage-title и ib-content) (такое вложение сделано для совместимости со старыми браузерами, которые не поддерживали корректно outline свойство)
<div class="ib-outline">
<div class="ib-storage">
<div class="ib-storage-title">ЗАГОЛОВОК ТЕМЫ</div>
<div class="ib-content">
</div>
</div>
</div>
Я хочу так реализовать css, чтобы было (см. jsfidder):
1) 2 прямоугольника и у каждого справа стрелочка/уголок, смотрящая справа
Реализовал, то второй блок (ib-content) не вплотную придвинулся к первому блоку (ib-storage-title), и не могу понять почему это произошло, выравнивать через абсолютное позиционирование - не самый лучший способ и хотелось бы автоматическое решение (вроде как использование display: inline-block
должно было бы помочь, но не помогло)
2) при наведении на первый блок стрелочка вправо меняется на стрелочку вниз
Релизовано
ПОШЛИ ВОПРОСЫ
3) Как исправить ошибку, что когда наводишь мышкой на правую стрелочку блока ib-storage-title
, то стрелочка исчезает и появляется нижняя стрелочка и тут же возвращается всё назад, в итоге появляется очень противное мигание?
Я понимаю причину - меняется состояние "есть объект / нет объекта / есть объект", но как это исправить, например, как задать в css, что наведение на стрелочку (объекты :before
и :after
) не должно восприниматься, как наведение на основной объект ib-storage-title
.
4) Как можно задать эффект, что при наведении на объект ib-storage-title
сначала исчезает правая стрелочка (втягивается в объект, т.е. в
border-left: 15px solid #0090d0;
15px уменьшаются до 0px, а потом вылезает нижняя стрелочка, т.е. в
border-top: 15px solid #0090d0;
0px увеличивается до 15px?
Свойство transtition
не помогло - выдаёт дичь вместо нужного эффекта.
5) для родительского блока ib-outline
добавлена тень, а можно ли её сделать для стрелочек/уголков?
Когда я пытаюсь вставить код тени, то тень появляется вокруг прямоугольника, в который вписан уголок, что понятно, но можно ли как-то обойти это?