Помогите написать стили

176
15 июля 2017, 06:32

как сделать такую же поперечную линию в css без использования самой картинки. И как сделать кнопку меню так как на фотке на чистом html и css

Answer 1

Псевдоэлементы вам в помощь.
Кнопка делается аналогично. Устанавливаете блоку толщину 2px, для него же :before и :after также по 2px со смещением обоих. Далее вешаете на него обработчик по клику и меняете положение :before и :after на крест и раскрываете меню. А еще лучше прописать, скажем, класс .active в css и свойством toggleClass менять его.

.block { 
  width: 100px; 
  height: 100px; 
  border: 1px solid red; 
  position: relative; 
  overflow: hidden; 
} 
.block:after { 
  content: ''; 
  width: 140px; 
  height: 1px; 
  background-color: red; 
  position: absolute; 
  top: 50%; 
  left: -20px; 
  transform: rotate(-45deg); 
}
<div class="block"></div>

Answer 2

И без всяких фокусов.

div { 
  width: 300px; 
  height: 300px; 
  background-image: linear-gradient(-45deg, lightgreen calc(50% - 1px), white 50%, lightgreen 50%); 
}
<div></div>

READ ALSO
не подключается файл mystyle.css
HTML

не подключается файл mystyle.css

Пишу тему на wordpressПодключил сторонние библиотеки все нормально, а мой файл со стилями не срабатывает

 272
Не работает gulp-dirty-markup
HTML

Не работает gulp-dirty-markup

Pug компилирует html в одну строку:

 252
Какая разница между input type button и button?
HTML

Какая разница между input type button и button?

Никак не могу понять какая разница между этими двумя тегамиИ как правильно и где какой нужно использовать

 231
проверка существоваание базы данных SQLite
c#

проверка существоваание базы данных SQLite

У меня два Activity! В первом я создаю БД

 232