Иногда при вставке документа необходимо использовать диагонали таблицы. Распространенным методом является использование изображений для их обработки, а также использование vml для рисования диагоналей. Можно ли этого добиться с помощью html+css? Ответ — да, давайте смоделируем диагональ стола.
Используйте линии границ для имитации диагональных линий. Мы знаем, что если линия границы DIV установлена достаточно широкой и определены разные цвета, пересечение двух соседних линий границы будет диагональной линией. Зная этот принцип, мы можем использовать border-left и border-top для имитации эффекта косой черты.
Давайте сначала создадим структуру:
<div class="выход">
<b>Категория</b>
<em>Имя</em>
</div>
Мы используем <div class="out"> в качестве диагонального контейнера и устанавливаем стиль косой черты. Код ключа следующий:
.вне{
border-top:40px #D6D3D6 Solid;/*Ширина верхней границы равна высоте первой строки таблицы*/
width:0px;/*Пусть ширина контейнера будет равна 0*/
height:0px;/*Пусть высота контейнера будет равна 0*/
border-left:80px #BDBABD Solid;/*Ширина левой границы равна ширине первой ячейки в первой строке таблицы*/
Position:relative;/*Сделайте два подконтейнера внутри абсолютно позиционированными*/
}
Теги <b> и <em> используются для установки двух категорий и установки для них структур блокировки соответственно display:block; очистите стиль шрифта по умолчанию, потому что родительский контейнер установил относительное позиционирование, поэтому установите. его к абсолютному позиционированию, чтобы вы могли сместить его в положение, которое хотите указать.
б {стиль шрифта: нормальный; дисплей: блок; положение: абсолютное; сверху: -40 пикселей; слева: - 40 пикселей; ширина: 35 пикселей;}
em {стиль шрифта: нормальный; дисплей: блок; положение: абсолютное; сверху: -25 пикселей; слева: -70 пикселей; ширина: 55x;}
Имитируется такая диагональная линия. Если вы знаете принцип, вы можете превратить его во множество интересных вещей. Желаю вам удачи!
Недостатки этого метода диагонального моделирования:
1. Необходимо знать ширину и высоту.
2. Длина ширины и высоты не может сильно отличаться. Можно попробовать сделать ширину в несколько раз больше высоты, чтобы увидеть эффект.
3. Также невозможно установить цвет диагональных линий.
Еще одно примечание: приведенный выше код тестировал только ie6 и ff3, другие браузеры не тестировались.