Диагональные линии в CSS

Я хочу создать div, который делится по диагональной линии на две части. Левая сторона должна быть желтой (например), а правая сторона должна быть синей. Как я могу это сделать?Диагональные линии в CSS

Спасибо.

(пожалуйста, запустите приведенный ниже код, чтобы увидеть пример того, что я говорю).

<html> 
<body> 
<p> 
******************************************<br> 
**********************....................<br> 
*********************.....................<br> 
********************......................<br> 
*******************.......................<br> 
******************........................<br> 
*****************.........................<br> 
******************************************<br> 
</p> 
</body> 
</html>

источник

2014-12-11 user3355028

возможно дубликат [двухцветной фоне раскола по диагональной линии с помощью CSS] (http://stackoverflow.com/questions/14739162/two-tone -background-split-by-diagonal-line-using-css) – jbutler483

Отметьте это http://jsfiddle.net/b5TnZ/ –

Это может быть легко достигнуто с помощью CSS3 Градиенты

Взгляните на следующий код:

p .diagonal{ 
background: #1e5799; 
background: -moz-linear-gradient(-45deg, #1e5799 50%, #fff600 50%); 
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#1e5799), color-stop(50%,#fff600)); 
background: -webkit-linear-gradient(-45deg, #1e5799 50%,#fff600 50%); 
background: -o-linear-gradient(-45deg, #1e5799 50%,#fff600 50%); 
background: -ms-linear-gradient(-45deg, #1e5799 50%,#fff600 50%); 
background: linear-gradient(135deg, #1e5799 50%,#fff600 50%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#fff600',GradientType=1); 
}

Если это слишком трудно понять, для вас, использовать некоторые онлайн службы, например, this для генерации желаемого градиента.

Просто установите расположение обоих цветов на 50% :)

источник

2014-12-11 11:38:45 Zeus77

спасибо, но градиент выглядит немного «забавным». Есть и другой простой способ сделать это? – user3355028

Я связал сайт, это так же просто, как и приятель – Zeus77

Диагональные линии в CSS

ответ

Смежные вопросы