с помощью css3 можно ли сделать стрелку табуляции, указывающую вниз?

Question

возможно ли создать треугольник, подобный тому, что изображен?даже с цветом двойной рамки?

(я получаю цвет двойной рамки в поле, из которого получится этот треугольник, выполнив два деления)

Answer 1

этот метод использует метод, описанный Джоном Роханом (который уже связан @RP.), Для создания треугольников из стилей границ и блочного элемента размером 0x0 (в данном случае это div)

пример jsfiddle

Я добавил дополнительные div для внутренней белой границы, их можно удалить, если вы пытаетесь минимизировать элементы HTML

HTML:

<div id="div1">
    <div id="div2">
        <div id="div3">
            Howdy!
            <div id="tabarrowShadow"></div>
            <div id="tabarrow"></div>
            <div id="tabarrowInner"></div>
            <div id="tabarrowInner2"></div>
        </div>
    </div>
</div>

CSS:

body {font-family:Helvetica,Arial,sans-serif;}
#div1 {border:solid 1px #ddd;padding:2px;background-color:#ebebeb;position:relative;}
#div2 {border:solid 1px #ddd;}
#div3 {border:solid 1px #f7f7f7;padding:25px;height:20px;}
#tabarrow {width:0;height:0;position:absolute;top:75px;left:20px;
    border-color:#ddd transparent transparent transparent;
    border-style:solid;
    border-width:15px;
}
#tabarrowInner {width:0;height:0;position:absolute;top:75px;left:22px;
    border-color:#f7f7f7 transparent transparent transparent;
    border-style:solid;
    border-width:13px;
}
#tabarrowInner2 {width:0;height:0;position:absolute;top:74px;left:23px;
    border-color:#eee transparent transparent transparent;
    border-style:solid;
    border-width:12px;
}
#tabarrowShadow {width:1px;height:1px;box-shadow:0 0 10px 1px #000;position:absolute;top:86px;left:35px}

Answer 2

Этого можно добиться, создав пустой div и присвоив ему ширину 0, и поместив границу желаемой толщины на противоположную сторону, на которую вы хотите, чтобы треугольник указывал.

Затем вы можете расположить ее там, гдеВы хотите.

См. http://jonrohan.me/guide/css/creating-triangles-in-css/ для получения инструкций.