Диагональные линии CSS с заполненным пространством

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

Как мне пойти 1, создав диагональную линию в css, и тогда можно ли заполнить пространство сплошным цветом под одной стороной указанной диагональной линии?

3 ответа

Диагональная линия с сплошным цветом под линией...

HTML

CSS

.uguu {
 line-height:0;
 width:0;
 border-top:20px solid transparent;
 border-right:100px solid green;
}

скрипт: http://jsfiddle.net/83Wyy/


Как я могу сделать 1, создавая диагональную линию в css, а затем можно заполнить пробел сплошным цветом под одной стороной указанной диагональной линии

Простое решение: не существует.

Комплексное решение: с большим количеством CSS, абсолютным позиционированием, не заботясь об IE (использование -moz-transform: rotate(45deg)), вы можете использовать глупые вещи,

Посмотрите, что могут сделать некоторые люди...

Personnaly, я бы пошел с решениями @a: используйте фоновое изображение.

Если вы действительно хотите "нарисовать", обратитесь к SGV, см. эту статью для примера, используя фреймворк dojo js.


Чтобы иметь диагональную линию в фоновом режиме, вам необходимо создать фоновое изображение.

Вы можете использовать этот сайт для создания полосатого диагонального фона: http://www.stripegenerator.com/

За то, что вы делаете, я бы рекомендовал иметь 2 отдельных полосатых фона.

licensed under cc by-sa 3.0 with attribution.