2

Нужно сделать вкладку первого элемента (показатели), проблема состоит в том, что параллелограмм не подходит, поскольку он имеет острый угол, который должен быть выровнен:

введите сюда описание изображения

Попытка сделать через 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:

введите сюда описание изображения

2
  • добавьте изображение, без него не очень понятно что у вас получилось
    – kizoso
    Commented 27 апр. 2017 в 14:21
  • я имела ввиду вашу картинку фона: background:url(../img/tabs_background_img.png) no-repeat; - вот эту, чтобы было наглядно в примере кода. Добавила вариант из того что есть.
    – kizoso
    Commented 27 апр. 2017 в 15:08

1 ответ 1

1

Не делайте before на углы, делайте на весь элемент:

.tab_test {
  width: 200px;
  height: 50px;
  position: relative;
  z-index: 0;
  left:-14px;
  display:table-cell;
}
.tab_test::before {
  content: "";
  position: absolute;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  width: 100%;
  height: 100%;
  background: blue;
  z-index: 1; 
}
.t{
  position:relative;
  z-index: 2;
  display: block;
  padding: 14px;
  text-align: center;
  color: white;
  }
.tabs{
  overflow: hidden;
  max-width:100%;
  display: table;
  border-spacing: 5px;
}
<div class="tabs">
  <div class="tab_test">
    <span class=t ab_text>Видеомониторинг</span>
  </div>
  <div class="tab_test">
    <span class=t ab_text>Видеомониторинг</span>
  </div>
  <div class="tab_test">
    <span class=t ab_text>Видеомониторинг</span>
  </div>
</div>

upd: Добавьте оборачивающий див со свойством Overflow:hidden; оно как раз будет обрезать края.

6
  • Предположим, но мне нужно вот так i7.5cm.ru/i/ZBB1.png
    – Silento
    Commented 27 апр. 2017 в 15:08
  • это как? поясните пожалуйста конкретнее, что вы хотите
    – kizoso
    Commented 27 апр. 2017 в 15:09
  • Вы нарисовали мне трапецию - и она у меня была, из этой трапеции мне нужно убрать слева острый угол верхний(см. ссылку), то есть это получится полу-трапеция и полу-прямоугольник. На исходном скрине это вкладка с надписью на ней "показатели"
    – Silento
    Commented 27 апр. 2017 в 15:11
  • вот так? еще вы показываете не полный код, поэтому добавила табличное отображение
    – kizoso
    Commented 27 апр. 2017 в 15:20
  • код полный, поскольку я именно эти вкладки и пытался сверстать. Да, это то что мне нужно, без табличного отображения возможно обойтись? Спасибо.
    – Silento
    Commented 27 апр. 2017 в 15:23

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.