Как сделать фон скошенный сбоку?

340
05 декабря 2017, 19:05

Возможно ли в CSS сделать так, чтобы при ховере на пункты меню фон был не прямоугольный, а скошенный справа?

Answer 1

Transform - Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.

SkewX - Наклоняет элемент на заданный угол по вертикали.

:Before - Псевдоэлемент применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.

a {  
    color: black; 
    padding: 3px; 
    position:relative; 
} 
ul{ 
    list-style:none; 
} 
li { 
    padding: 5px;  
} 
a:hover{  
    background: #075d9f; 
    color:white; 
} 
a:hover:before { 
    top: 0; 
    right: -8px; 
    padding: 0.1px; 
    -webkit-transform: skewX(-11deg); 
        -ms-transform: skewX(-11deg); 
            transform: skewX(-11deg); 
    width: 100%; 
    height: 100%; 
    background: #075d9f; 
    z-index: -1; 
    content: ""; 
    display: block; 
    position: absolute; 
}
<!DOCTYPE html> 
<html> 
 <head></head> 
<body> 
 
<ul> 
  <li><a href="#home">Home</a></li> 
  <li><a href="#news">News</a></li> 
  <li><a href="#contact">Contact</a></li> 
  <li><a href="#about">About</a></li> 
</ul> 
 
</body> 
</html>

Answer 2

Можно clip-path использовать как вариант

body{ 
  padding: 0; 
  margin: 0; 
  background: skyblue; 
} 
 
ul{ 
  list-style: none; 
} 
 
li{ 
 width: 200px; 
 position: relative; 
 clip-path: polygon(0 1%, 100% 0, 90% 100%, 0% 100%); 
 cursor: pointer; 
} 
 
li:hover{ 
  background: white; 
}
<ul> 
  <li>Первый</li> 
  <li>Второй</li> 
  <li>Третий</li> 
</ul>

Answer 3

через :after делает треугольник. Угол треугольника регулируется за счет border-top и border-right. И подгоняется параметр right

.test { 
  position: relative; 
  width: 150px; 
  height: 50px; 
  background: #002b55; 
  margin-bottom: 10px; 
  color: white;   
} 
 
.test:after { 
  content: ''; 
  width: 0px; 
  height: 0px; 
  position: absolute; 
  right: -50px; 
   
} 
 
.test span { 
  display: inline-block; 
  margin-left: 50px; 
  margin-top: 10px; 
  font-size: 20px;   
} 
 
.test:hover { 
  width: 100px; 
  background: #224d77; 
} 
 
.test:hover:after {  
   border-top: 50px solid #224d77; 
    
  border-right: 50px solid transparent; 
}
<div class="test"><span>Test1</span></div> 
<div class="test"><span>Test2</span></div> 
<div class="test"><span>Test3</span></div> 
<div class="test"><span>Test4</span></div>

Еще примеры фигур https://css-tricks.com/examples/ShapesOfCSS/

Answer 4

h1 span { 
  display: inline-block; 
  position: relative; 
  background: silver; 
  line-height: 1.25em; 
  padding: 0 .25em; 
  margin-right: .625em; 
} 
 
h1:hover span::after { /* или span:hover::after по необходимости */ 
  content: ""; 
  position: absolute; 
  left: 100%; 
  border-style: solid; 
  border-width: 1.25em .625em 0 0; 
  border-color: silver transparent transparent transparent; 
}
<h1><span>Заголовок</span></h1>

Answer 5

Братцы, у вас слишком много кода.

span { 
  display: inline-block; 
  padding: 8px 24px 8px 24px; 
  color: white; 
  background-image: linear-gradient(darkblue, darkblue); 
} 
 
span:hover { 
  background-image: linear-gradient(110deg, darkblue 86%, transparent 86%); 
}
<span>тест</span>

READ ALSO
MySQL запрос из двух таблиц с условием
MySQL

MySQL запрос из двух таблиц с условием

Приветствую, собственно вопрос, как реализовать запрос на выборку из двух таблиц с таким условием:

 386
Ошибка размера БД на Denwer
MySQL

Ошибка размера БД на Denwer

Всем привет!) У меня такая вот проблемкаСтавлю на Denwer Базу данных на WordPress

 260
Можно ли бэкапить MySQL, тупо копируя каталог с БД?
MySQL

Можно ли бэкапить MySQL, тупо копируя каталог с БД?

Ситуация такова: есть мастер-сервер MySQL (ну или MariaDB, если быть точным), есть репликаКаждую ночь mysqld с репликой отключается на время, и папочка...

 301
Динамическое имя таблицы в триггере
MySQL

Динамическое имя таблицы в триггере

Есть триггер, который копирует столбцы из одной таблицы в другуюКак присвоить имя таблицы динамической переменной @nametable? Каждый день имя...

 295