Нужно сделать вкладку первого элемента (показатели), проблема состоит в том, что параллелограмм не подходит, поскольку он имеет острый угол, который должен быть выровнен:
Попытка сделать через border || before оказывались безуспешными, поскольку transform
(будет указан в коде ниже) переносит свойство родителя на псевдо-элемент, border
вообще не реагирует.
Иначе говоря, надо делать первую вкладку плоской слева, но оставив заострённый угол справа, как у параллелограмма.
CSS:
.tab {
position: relative;
width: 200px;
height: 50px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
background: red;
background-size: 100%;
background: url(../img/tabs_background_img.png) no-repeat;
}
.tab_test {
width: 200px;
height: 50px;
position: relative;
background-size: 100%;
background: url(../img/tabs_background_img.png) no-repeat;
z-index: 0;
}
.tab_test::before {
content: "";
position: absolute;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
width: 30px;
height: 38px;
margin-left: 180px;
background: url(../img/tabs_background_img.png) no-repeat;
z-index: 1; //просто попытка
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<div class="tab">
<span class=t ab_text>Видеомониторинг</span>
</div>
<div class="tab_test">
<span class=t ab_text>Видеомониторинг</span>
</div>
<!--
<legend>Какая то легенда</legend>
<input type="text" name="amount">
-->
</body>
</html>
Не нахожу никакого другого способа, кроме наложения спана выше, но это уже совсем последнее дело.
Вот как это выглядит с before
: