Рисовать треугольник с помощью CSS? - PullRequest
Новая
       4

Рисовать треугольник с помощью CSS?

3 голосов
/ 21 ноября 2010

Я знаю, что вы можете рисовать с помощью элемента canvas, я просто хотел узнать, можно ли нарисовать треугольник рядом со ссылкой, не используя элемент canvas?Я просто хочу маленькую стрелку вниз <16px. </p>

Ответы [ 5 ]

13 голосов
/ 21 ноября 2010

Вот мой взгляд на рисование треугольника в CSS. Вы можете просмотреть его на JSFiddle . Не тестировал браузер (работает в Chrome!)

CSS довольно прост: 

.triangle{
display: block;
border-bottom: 16px solid transparent;
border-left: 16px solid red;
overflow: hidden;
position: absolute;
}

Если вы хотите, чтобы он указывал в другом направлении, просто измените границы. Например, следующее будет указывать треугольник вниз: 

.triangle{
display: block;
border: 16px solid transparent;
border-top: 16px solid red;
overflow: hidden;
position: absolute;
}

Редактировать: Работает в последних версиях IE, FF и Chrome.

5 голосов
/ 21 ноября 2010

Нет.

Самое близкое, что вы можете получить, это использовать клавишу ASCII, &darr;, если быть точным.

Создает стрелу, подобную этой & darr;

Конечно, фоновое изображение поможет, но это совершенно очевидно, не так ли? :)

3 голосов
/ 21 ноября 2010

U + 25BC: в Unicode существует черный треугольник, указывающий вниз.Вот оно: ▼

Вы можете использовать этот CSS для его применения: 

a:before {
    content: "▼";
}

Хотя, вероятно, лучше использовать background-image.Таким образом, вы не зависите от наличия таких специальных символов в шрифте, который использует веб-браузер, и он будет отображаться в IE 6/7.Например: 

a {
    background-image: url("arrow.gif");
    padding-left: 16px;
}
2 голосов
/ 21 ноября 2010

Нет.Просто используйте специальный символ ASCII, &#darr;, CSS не требуется: 

<span id = "down-arrow">&#darr;</span>
1 голос
/ 07 января 2013

Вот мой простой рисунок для треугольника с использованием CSS: 

<div style="border: 11px solid transparent; border-right-color: rgba(0, 0, 0, 0.25);"></div>

Если вам нужно изменить направление, просто замените border-right-color на border- direction -color . И, возможно, вы используете свойства position: absolute; и margin-top и margin-left для установки позиции.

...