 | Дата: | Автор: |  |
| 24.11.2015 | Konstantin |
Создаем наклонный блок DIV при помощи css. Для начала возьмем вот такой блок div с текстом внутри. <div class="NaklonDiv"> <p><a style="color:#FFFFFF;" href="http://zvs.ucoz.com/index/zarabotok_na_klikakh/0-66" target="_blank">Заработок на кликах</a> <br>Виды заработка <br>Серфинг (просмотр сайта рекламодателя) <br>Оплачиваемые письма (прочитать письмо) <br>Задания (необходимо выполнить условия задания)</p> </div> И стили к нему. .NaklonDiv { width:320px; padding:4px 30px; background: #df2027; color:#FFFFFF; } Теперь нам нужно прописать правила в стилях, которые сделают блок div наклонным. А прописывается это следующим правилом. webkit-transform: skewX(-10deg); -moz-transform: skewX(-10deg); -ms-transform: skewX(-10deg); -o-transform: skewX(-10deg); transform: skewX(-10deg); Меняя значение -10 вы можете менять наклон вашего div блока. В итоге у нас получился вот такой блок. Заработок на кликах Как вы успели заметить, вместе с блоком наклоняется все его содержимое. <div class="NaklonDiv"> <div class="NaklonDiv1"> <p><a style="color:#FFFFFF;" href="http://zvs.ucoz.com/index/zarabotok_na_klikakh/0-66" target="_blank">Заработок на кликах</a> <br>Виды заработка <br>Серфинг (просмотр сайта рекламодателя) <br>Оплачиваемые письма (прочитать письмо) <br>Задания (необходимо выполнить условия задания)</p> </div> </div> Далее в стилях прописываем .NaklonDiv1 { -webkit-transform: skewX(10deg); -moz-transform: skewX(10deg); -ms-transform: skewX(10deg); -o-transform: skewX(10deg); transform: skewX(10deg); } Установив значение противоположное тому, что было в NaklonDiv, а точнее если в NaklonDiv было -10 то тогда в NaklonDiv1 устанавливаем 10 или наоборот. В итоге у меня получился вот такой вариант Заработок на кликах |
658
0.0 (0)
