Как сделать косой блок?

DynamoFan

DynamoFan

Постоялец
Регистрация
15 Июл 2011
Сообщения
80
Реакции
55
Учусь верстать и вот выбрал шаблон, там блок съезжает (вот шаблон Для просмотра ссылки Войди или Зарегистрируйся ) как реализовать тот белый косой блок?
 
DynamoFan написал(а):
Учусь верстать и вот выбрал шаблон, там блок съезжает (вот шаблон Для просмотра ссылки Войди или Зарегистрируйся ) как реализовать тот белый косой блок?
Нажмите для раскрытия...
Под спойлером код.
HTML: 
<div id="element">
<div id="element1">
Код: 
#element:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 90%;
  top: 20%;
  left: -30%;
  z-index: 1;
  background: #fff ;
  opacity: 0.8;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
}
#element1:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  z-index: 0;
  background: url(http://imgg.marketgid.com/2152/2152988_vb.jpg) 0 0 repeat;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

В работе тут:
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Только оптимизируйте.

upd. ссылку поставил на свой акк. чтоб фотка не слетела.
 
Последнее редактирование:
Solus_Rex написал(а):
Под спойлером код.
HTML: 
<div id="element">
<div id="element1">
Код: 
#element:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 90%;
  top: 20%;
  left: -30%;
  z-index: 1;
  background: #fff ;
  opacity: 0.8;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
}
#element1:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  z-index: 0;
  background: url(http://imgg.marketgid.com/2152/2152988_vb.jpg) 0 0 repeat;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

В работе тут:
Для просмотра ссылки Войди или Зарегистрируйся
Только оптимизируйте.
Нажмите для раскрытия...
что то не работает. сплошной белый блок. блок что под спойлом вставлял
 
DynamoFan написал(а):
что то не работает. сплошной белый блок. блок что под спойлом вставлял
Нажмите для раскрытия...
У меня всё работает. Вы на codepen.io по ссылке заходили?
Вот:
Для просмотра ссылки Войди или Зарегистрируйся
и вот на тестовом уже в html:
Для просмотра ссылки Войди или Зарегистрируйся

Если белый экран, то думаю, что Вы не верно задали путь к картинке. Посмотрите в html-ке по второй ссылке, как путь задан.
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху