Верстка определенной формы вкладки

211

28 апреля 2017, 18:48

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

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

Answer 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; оно как раз будет обрезать края.

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Запрос sql выборка сообщений

Есть таблица messageprivate со структурой:

238

MySQL

удаление дублей из большой mysql базы

Здравствуйте! есть табличка mysql с 60 млн записями, имеет поля: ID, keyword (varchar 200), catНеобходимо оставить только записи с уникальными значениями...

247

Java

Не могу понять запись создания взаимных ссылок между классами

У меня есть два класса: Controller и ViewerОни вроде как связаны между собой

221

Java

регулярное выражение для пути

помогите с регулярным выражением, нужно чтобы к примеру путь C:\Users\Admin\ разделился на C:\Users\ и на Admin\ ,понял что нужны регулярные выражения, но не понял...

203