Вы можете увидеть коробку со стрелками, как показано на рисунке выше. Эта стрелка может быть реализована с помощью фоновых изображений или CSS. Эта статья представляет три ящика с стрелками через CSS.
1. Пройдите атрибут границы
Идея: два треугольника, два треугольника отличаются от 1PX в качестве границы путем позиционирования.
2. CSS3 Преобразование
Идея: сначала сделайте квадрат с одним и тем же цветом с двух сторон, а затем поверните его под определенный угол, чтобы сделать его треугольником.
3. Специальные персонажи '♦'
Мысль: первая половина особых персонажей просочилась, и они выглядят как треугольники
1. Пройдите атрибут границы:
Давайте сначала сделаем Div с шириной и высотой 10px, а граница также составляет 10px.
Ширина: 10px; Высота: 10px; Граница: 10px твердый; Пограничный цвет: красный зеленый желтый синий;
Как показано на рисунке ниже:
Бланк в середине картинки - это ширина и высота, которую мы устанавливаем. Если он установлен на 0PX, что произойдет? , как показано ниже:
В настоящее время мы можем установить цвета левой и нижней границы, чтобы быть прозрачными или того же цвета, что и цвет фона, и выйдет треугольник, который мы хотим. Как показано на рисунке ниже:
Теперь давайте достигнем влияния на первую картину:
CSS:
.info {margin-top: 50px; позиция: относительно; Ширина: 200px; Высота: 50px; высота линии: 60px; Фон:#f6f1b3; Box-Shadow: 1px 2px 3px #e9d985; Граница: 1px solid #dace7c; граница-радий: 4px; Текст-альбом: Центр; Цвет: красный; } .nav {position: Absolute; Слева: 30px; переполнение: скрыто; Ширина: 0; высота: 0; ширина границы: 10px; Пограничный стиль: сплошные пунктирные пунктирные пунктирные пунктирные; } .nav-border {top: -20px; Пограничный цвет: прозрачный прозрачный #dace7c прозрачный; } .nav-background {top: -19px; Пограничный цвет: прозрачный прозрачный #f6f1b3 прозрачный; }HTML:
<div> <pan> Сообщение о приглашении </span> <div> </div> <div> </div> </div>
2. CSS3 Transform
Сначала мы делаем коробку Div с двумя соседними границами с одним и тем же цветом и двумя другими границами с 0PX. Как показано на картинке:
Поверните коробку на 45 градусов, чтобы достичь эффекта приглашения треугольника.
CSS:
.info {margin-top: 50px; позиция: относительно; Ширина: 200px; Высота: 50px; высота линии: 60px; Фон:#f6f1b3; Box-Shadow: 1px 2px 3px #e9d985; Граница: 1px solid #dace7c; граница-радий: 4px; Текст-альбом: Центр; Цвет: красный; } .nav {position: Absolute; Верх: -8px; Слева: 30px; переполнение: скрыто; Ширина: 13px; Высота: 13px; Фон:#f6f1b3; РЕШЕНЬ-ЛЕРФ: 1PX SOLID #DACE7C; Пограничная топ: 1PX SOLID #DACE7C; -Вебкит-трансформ: вращение (45deg); -Моз-трансформ: вращение (45deg); -О-трансформирование: вращение (45deg); Преобразование: вращение (45deg); }HTML:
<div> <pan> Сообщение о приглашении </span> <div> </div> </div>
3. Специальные персонажи '♦'
'♦'-это особый персонаж, который эквивалентен персонажу, поэтому размер устанавливается через размер шрифта для достижения эффекта первой картины:
CSS:
.info {margin-top: 50px; позиция: относительно; Ширина: 200px; Высота: 50px; высота линии: 60px; Фон:#f6f1b3; Box-Shadow: 1px 2px 3px #e9d985; Граница: 1px solid #dace7c; граница-радий: 4px; Текст-альбом: Центр; Цвет: красный; } .nav {position: Absolute; Слева: 30px; переполнение: скрыто; Ширина: 24px; Высота: 24px; Шрифт: нормальный 24px "Microsoft Yahei"; } .nav-border {top: -17px; Цвет:#dace7c; } .nav-background {top: -16px; Цвет:#f6f1b3; }HTML:
<div> <pan> Сообщение о приглашении </span> <div> ♦ </div> <div> ♦ </div> </div>
Ниже приведена демонстрация, которая совместима с IE5.5+, Chrome, Firfox и другими браузерами. Если вы используете его, вы можете напрямую сдать экзамен в свой собственный проект.
<! Doctype html> <html> <head> <title> </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <style> div.container {position: Absolute; Верх: 30px; Слева: 40px; размер шрифта: 9pt; дисплей: блок; высота: 100px; Ширина: 200px; фоновый цвет: прозрачный; *Граница: 1PX SOLID #666; } s {position: Absolute; Верх: -20px; *Верх: -22PX; Слева: 20px; дисплей: блок; высота: 0; Ширина: 0; размер шрифта: 0; высота линии: 0; Пограничный цвет: прозрачный прозрачный #666 прозрачный; пограничный стиль: пунктирные пунктирные сплошные пунктирные; ширина границы: 10px; } i {position: Absolute; Верх: -9px; *Верх: -9px; Слева: -10px; дисплей: блок; высота: 0; Ширина: 0; размер шрифта: 0; высота линии: 0; Пограничный цвет: прозрачный прозрачный #FFF прозрачный; пограничный стиль: пунктирные пунктирные сплошные пунктирные; ширина границы: 10px; } .content {border: 1px solid #666; -Моз-грамотный радий: 3PX; -Вебкит-грамотный радий: 3px; позиция: абсолютно; фоновый цвет: #fff; Ширина: 100%; высота: 100%; Заполнение: 5px; *Верх: -2px; *Пограничная топ: 1PX SOLID #666; *Пограничная топ: 1PX SOLID #666; *Пограничная топ: 1PX SOLID *РЕДИЧЕСКАЯ МЕРТА: Нет; *граница правая: нет; *Высота: 102px; Box-Shadow: 3px 3px 4px; -Мозо-бокс-тень: 3px 3px 4px; -Webkit-box-shadow: 3px 3px 4px; / * Для IE 5.5 - 7 */ Filter: Progid: dximagetransform.microsoft.shadow (сила = 4, направление = 135, цвет = '#999999'); / * Для IE 8 */ -MS -Filter: «PROGID: DXIMAGETRANSFORM.MICROSOFT.SHADOW (сила = 4, направление = 135, цвет = '#999999')"; } </style> </head> <body> <div> <div> <div> Привет, мир! </div> <s> <i> </i> </s> </div> </body> </html>Изображение воспроизведения:
краткое содержание:
В приглашении с стрелками хорошие результаты для взаимодействия с пользователем. Эта статья представляет три метода. Если у вас есть другие методы для @me, я был бы очень благодарен. Надеюсь, эта статья может вам помочь.