Вниз лицом к треугольнику ... но подождите ... что это ... с границами?

Question

Я использую классный CSS здесь:

http://css -tricks.com / snipspets / css / css-triangle /

Я создаюпростой треугольник для чего-то, что я буду совершенствовать с помощью некоторого jQuery.Проблема в том, что мне нужно, чтобы у треугольника были границы для двух его сторон.Видя, как треугольник сделан из границ, это вызывает у меня головную боль.

Посмотрите на эту картинку здесь:

Мне нужны стороны Aи B, чтобы иметь границу, чтобы они не смешивались с другим апельсином.

Вот пик на css для самого треугольника:

.arrow-down {
        position:relative;
        top:30px;
        margin-left:auto;
        margin-right:auto;
        padding-top:30px;
        width:0;
        height:0;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        border-top:20px solid #FF6A00;
}

Итак, я открыт для альтернативных решений (необычно, верно?).Я бы предпочел решение с моей текущей настройкой только потому, что я уже вложил в него много работы.В любом случае, мне нужно, чтобы у этого была граница (я думаю, вы могли бы назвать меня «отчаянным»).

Приветствия и большое спасибо за любую помощь!

Answer 1

с небольшими изменениями вы можете достичь этого, я не уверен, что это лучший способ, но он точно работает.

Идея состоит в том, чтобы второй «немного больший» треугольник располагался позади оранжевого.

попробуйте рабочий пример @ jsfiddle http://jsfiddle.net/saelfaer/e4ahw/

после наложения двух треугольников друг на друга, я перемещаю их на 2 пикселя top: -2px, чтобы они лежали на вершине оранжевого прямоугольника, и таким образом скрываю черную границу, которая проходит вокруг элемента, который вы хотите иметь стрелку вкл:)

Answer 2

Я на самом деле не знаю, будет ли это работать на IE7 ...

.arrow-down {
        position:relative;
        top:30px;
        margin-left:auto;
        margin-right:auto;
        padding-top:30px;
        width:0;
        height:0;
        border-left:22px solid transparent;
        border-right:22px solid transparent;
        border-top:22px solid #000;
}
.arrow-down:before {
        content: '';
        position:absolute;
        top: -22px;
        left: -20px;
        margin-left:auto;
        margin-right:auto;
        padding-top:30px;
        width:0;
        height:0;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        border-top:20px solid #FF6A00;
}

мое хакерское решение Смотрите здесь

Answer 3

Это скорее концептуальная идея, чем жесткий ответ (я действительно не так хорош, как вы с CSS).Но я видел, как люди делали тени, просто помещая идентичный элемент в то же положение, что и верхний элемент, но смещая его на один или несколько пикселей и с меньшим z-индексом.

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

Answer 4

Попробуйте: http://jsfiddle.net/rSzds/1/

CSS:

.arrow-down-border {
        width:0;
        height:0;
        position:relative;
        border-left:22px solid transparent;
        border-right:22px solid transparent;
        border-top:22px solid black;

}
.arrow-down {
        padding:0px;
        position:absolute;
        width:0;
        height:0;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        border-top:20px solid #FF6A00;
        margin-left: -20px;
        margin-top: -21px;
        float: left;
}

HTML:

<div class="arrow-down-border">
    <div class="arrow-down">
    </div>
</div>

Iне проверял это в IE7.

Answer 5

Я бы создал класс .arrow-down-border, с черным цветом и вторым треугольным делением.

fiddle

Answer 6

& # 9660 ▼

& # 9661 ▽

& # 9662 ▾

& # 9663 ▿

& # 9947 ⛛

& # 9207 ⏷