Косые линии в CSS

@Vertol · Регистрация: 01.02.2013

Author24 — интернет-сервис помощи студентам

Как сделать косую линию в CSS ?

@calculon_ · 24.07.2013, 13:15

Взято с хабра http://habrahabr.ru/qa/11629/

HTML5

<style>
hr {
  -webkit-transform: rotate(120deg);
     -moz-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
       -o-transform: rotate(120deg);
}
</style>
 
<hr>

@Vors · 01.07.2014, 15:34

Одни вопросы!!!!
Что есть такое - deg?
120 это угол наклона линии ?

Где ошибка в коде:
?

HTML5

1 2	<div style="webkit-transform: rotate(120degmoz-transform: rotate(120deg);ms-transform: rotate(120deg);o-transform: rotate(120deg)"> </div>

или может
так?

HTML5

1 2	<div style="transform: rotate(120d"> </div>

причем тут - hr?
и к слову вероятно - span а не div ?

Кликните здесь для просмотра всего текста

нужен ИМЕННО html. а не css код

@killlfun · 01.07.2014, 16:55

Vors, Притом что HR это линия.
И с помощью css, а именно свойства transform, ее изменяют.
DEG это единица измерения угла, градусы.

HTML5

1	<hr style="-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg);">

@calculon_ · 01.07.2014, 17:01

Одни ответы!!!!
deg = degree = градус

Сообщение от Vors

120 это угол наклона линии ?

- это угол наклона элемента

Сообщение от Vors

Где ошибка в коде

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

Сообщение от Vors

или может
так?

- transform это css3 будет работать в новых браузерах для старых код выше.

Сообщение от Vors

причем тут - hr?

- при том что на основе него пример

Сообщение от Vors

и к слову вероятно - span а не div ?

- абсолютно без разницы, хоть h1

Сообщение от Vors

нужен ИМЕННО html. а не css код

- в вашем коде присутствует css и без него вам не обойтись

@monochromer · 01.07.2014, 17:46

Если это оформительский элемент (например, фоновый рисунок), то можно сделать линейными градиентами. Информации полно.

@Vors · 03.07.2014, 14:39

Оформительский элемент, ага,
именно

HTML5

<div id="parallelogram"style="width:150px;height:100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg);-o-transform: skew(20deg);background:red;"> 
Самид Агаев
«Греческая рапсодия»
</div>

толькА отчего-то паралл-а так не получилось

@Vertol -2 / 8 / 2 Регистрация: 01.02.2013 Сообщений: 187
		1
	Косые линии в CSS 23.07.2013, 20:54. Показов 22302. Ответов 6 Метки нет (Все метки) Как сделать косую линию в CSS ? Изображения 0

@calculon_ 21 / 21 / 6 Регистрация: 16.07.2013 Сообщений: 68
	01.07.2014, 17:01	5
	Одни ответы!!!! deg = degree = градус Сообщение от Vors 120 это угол наклона линии ? - это угол наклона элемента Сообщение от Vors Где ошибка в коде - про копировании хоть проверяйте что скопировали, но даже после исправления див не станет косой линией, вам еще надо задать ширину высоту и фон. Сообщение от Vors или может так? - transform это css3 будет работать в новых браузерах для старых код выше. Сообщение от Vors причем тут - hr? - при том что на основе него пример Сообщение от Vors и к слову вероятно - span а не div ? - абсолютно без разницы, хоть h1 Сообщение от Vors нужен ИМЕННО html. а не css код - в вашем коде присутствует css и без него вам не обойтись 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	01.07.2014, 17:46	6
	Если это оформительский элемент (например, фоновый рисунок), то можно сделать линейными градиентами. Информации полно. 0

	03.07.2014, 14:39