Можно ли сделать треугольники / стрелки CSS, которые не являются вашими типичными прямоугольными треугольниками с примененным градиентом?

Я знаю, что для создания простой стрелки в CSS я могу сделать это:

<div class="arrow-button">
    <span class="arrow-tip-container">
         <span class="arrow-tip"></span>
    </span>
</div>

Затем все, что мне нужно будет сделать, это повернуть и расположить контейнер, затем заполнить кончик стрелки и БАМ! вот замечательная стрелка: http://jsfiddle.net/uF69S/

Тем не менее, мне нужна стрелка, кончик которой фактически имеет угол 120, поэтому можно ли добиться этого эффекта с помощью преобразований CSS или двух разных контейнеров? Может перекос и поворот?

Я хотел бы создать эту стрелку:

------------\
|            \
|            /
------------/

Обратите внимание, что стрелка не 90.

ПРИМЕЧАНИЕ. Мне известно, что граничный треугольник можно использовать для создания любого угла треугольника, однако они не поддерживают градиенты в Firefox, Opera или IE, в то время как Firefox, Opera и IE может поддерживать преобразования (так или иначе).


css css-transforms
person Jai    schedule 20.12.2012    source источник
comment
Вы можете сделать настоящие треугольники, используя лайфхаки с границами; это может помочь.   -  person SLaks    schedule 20.12.2012
comment
Тоже искал решение. Ознакомьтесь с этим вопросом. Возможно, вы захотите сделать это с помощью SVG.   -  person Stanley    schedule 20.12.2012

Ответы (3)


arrow_upward
9
arrow_downward

Вы можете использовать наклон для создания треугольника 120 градусов следующим образом:

.arrow-tip {
    display:block;
    width:50px;
    height:50px;
    margin:0 0 0 -20px;
    -webkit-transform:rotate(45deg) skew(20deg,20deg);
 }

Также: http://jsfiddle.net/95Xq8/

person ramshinde1992    schedule 21.12.2012
comment
отлично, я пробовал это раньше, просто не мог правильно подобрать углы; просто в качестве примечания для всех, кто ищет, это решение совместимо с ie7 и выше, если вы используете этот красивый конвертер преобразований в фильтры ie: useragentman.com/IETransformsTranslator - person Jai; 21.12.2012

arrow_upward
3
arrow_downward

Это может быть началом:

HTML:

<div>▲</div>​

CSS:

div {
  font-size: 46px;
  -webkit-transform: scaleY(.3);
}​

Просмотрите его на JSFiddle.

person jamesplease    schedule 20.12.2012

arrow_upward
1
arrow_downward

Вы против использования HTML5 Canvas? Он поддерживается для IE9+ (согласно caniuse).

Это поможет вам начать работу: http://www.dbp-consulting.com/tutorials/canvas/CanvasArrow.html

person Anson    schedule 20.12.2012
comment
я не против, но я надеюсь на решение ie7 +, и я уверен, что что-то должно быть возможно со всей мощью css - person Jai; 20.12.2012
comment
Если вы застряли в поддержке IE7, то НЕТ, я очень сомневаюсь, что вы сможете сделать это в CSS. Используйте изображение и избавьте себя от мигрени. - person Graham; 21.12.2012