Я пытаюсь создать содержимое с вкладками с некоторой границей и тенями.
Это немного отличается от вопросов тем, что я пытаюсь создать тени. Кроме того, вся область вкладки должна быть кликабельной. В основном сложный div внутри тега привязки в li
Попытка 1. Использовался квадратный блок и поворачивался так, чтобы были видны две ширины границы.
Что у меня есть сейчас:
Что я хочу получить, когда вкладка открыта/активна (только с использованием CSS):
Попытка 2. Использовался прямоугольный треугольник после каждого элемента li. Поместил его непосредственно перед следующим элементом li. Не удалось найти белое отступы между ними (это можно исправить с помощью отступа между двумя li), но не удалось найти возможное решение для тени.
Попытка 3 Располагает цветной прямоугольный треугольник после элемента Располагает белый треугольник позади него и :перед следующим элементом li. На этот раз тени испугали меня.
Таким образом, в основном проблемы заключаются в хвосте следующего элемента li и тени шеврона текущего элемента.
Демонстрация попытки во фрагментах стека
.my-tabs {
width: 100%;
margin: 10px 0 !important;
display: flex;
overflow: hidden;
position: relative;
z-index: 100;
padding-top: 10px;
}
.my-tabs li a {
padding: 15px 20px 15px 50px;
background: #ff5050;
display: block;
height: 56px;
}
.my-tabs li {
display: block;
width: 20%;
font-size: 1.1em;
margin: 0;
}
.my-tabs li:last-child:after {
border-top: 28px solid #fff;
border-left: 28px solid transparent;
margin-right: 0;
border-style: solid;
border-right: 0;
border-bottom: 28px solid #fff;
content: '';
height: 0;
float: right;
margin-top: -56px;
transform: none;
width: 0;
}
.my-tabs:after {
border-left: 40px solid #ff5050 !important;
margin-top: 1px;
margin-left: -2px;
}
.my-tabs li:after {
margin-right: -7px;
border-style: solid;
border-width: 4px 4px 0 0;
border-color: white;
content: '';
height: 43px;
float: right;
margin-top: -43px;
transform-origin: center top;
transform: rotate(45deg);
width: 43px;
}
.my-tabs li.active:after {
-webkit-box-shadow: 8px 0px 4px -3px #090A09;
-moz-box-shadow: 8px 0px 4px -3px #090A09;
-o-box-shadow: 8px 0px 4px -3px #090A09;
box-shadow: 8px 0px 4px -3px #090A09;
}
.my-tabs li.active {
border-bottom: 8px solid white;
}
.my-tabs li.active a {
-webkit-box-shadow: 0px 8px 4px -3px #090A09;
-moz-box-shadow: 0px 8px 4px -3px #090A09;
-o-box-shadow: 0px 8px 4px -3px #090A09;
box-shadow: 0px 8px 4px -3px #090A09;
}<ul class="my-tabs">
<li id="gtab0" class=""><a href="javascript:void(0)">tab1</a></li>
<li id="gtab1" class=""><a href="javascript:void(0)">tab2</a></li>
<li id="gtab2" class="active"><a href="javascript:void(0)">tab3'</a></li>
<li id="gtab3" class=""><a href="javascript:void(0)">tab4</a></li>
<li id="gtab4" class=""><a href="javascript:void(0)">tab5</a></li>
</ul>