Чистый треугольник CSS с полупрозрачной рамкой. Возможное?

Question

Можно ли нарисовать стрелку с полупрозрачной рамкой вокруг нее, используя css?

Heres скрипку моих усилий до сих пор: http://jsfiddle.net/calebo/fBW4u/

CSS:

.ui-overlay { 
    padding-bottom: 10px; 
    position: relative; 
} 
.ui-overlay-content { 
    background: #999; 
    color: #000; 
    padding: 8px; 
    border-radius: 4px; 
    border: 5px solid rgba(0, 0, 0, 0.2); 
    background-clip: padding-box; 
    height: 100px; 
    width: 200px; 
} 
.arrow { 
    border-color: #999 transparent transparent; 
    border-style: solid; 
    border-width: 10px 10px 0; 
    bottom: 5px; 
    left: 15px; 
    width: 0; 
    height: 0; 
    position: absolute; 
    overflow: hidden; 
} 

Answer 1

Это все еще нуждается в некоторой работе, но вот общая идея:

Используйте псевдо- , поверните его на 45 градусов и примените к нему:

.arrow { 
    bottom: -25px; 
    left: 30px; 
    width: 40px; 
    height: 40px; 
    position: absolute; 
    overflow: hidden; 
} 
.arrow:after { 
    content: ' '; 
    display: block; 
    background: red; 
    width: 20px; 
    height: 20px; 
    transform: rotate(45deg); 
    position: absolute; 
    top: -19px; 
    left: 3px; 
    background: #999; 
    border: 5px solid rgba(0, 0, 0, 0.2); 
    background-clip: padding-box; 
} 

Вот скрипка: http://jsfiddle.net/yZ3vB/

---

Проблема с этим состоит в том, что границы перекрываются, что делает его более темным по краям.

Возможно, это может быть связано с добавлением еще одного элемента.

Обновление: Да! Здесь вы идете: http://jsfiddle.net/sJFTT/

---

Update 2: Вам даже не нужно, что дополнительный элемент. Вы можете использовать элемент псевдо от основной коробки:

.ui-overlay-content:after { 
    content: ' '; 
    border-width: 13px; 
    border-color: #999 transparent transparent; 
    border-style: solid; 
    bottom: -10px; 
    left: 30px; 
    width: 0; 
    height: 0; 
    position: absolute; 
} 

Вот скрипку: http://jsfiddle.net/6v9nV/

---

Update 3: На самом деле, вы можете сделать все это только с одним элементом и без трансформации с использованием обоих псевдоэлементов - before и after:

.speech-bubble { 
    background: #999; 
    background: linear-gradient(top, #444 0%,#999 100%); 
    background-clip: padding-box; 
    border: 5px solid rgba(0, 0, 0, 0.2); 
    padding: 20px; 
    width: 200px; 
    height: 100px; 
    position: relative; 
} 
.speech-bubble:before{ 
    content: ' '; 
    border-color: rgba(0, 0, 0, 0.2) transparent transparent; 
    border-style: solid; 
    border-width: 17px; 
    position: absolute; 
    bottom: -39px; 
    left: 16px; 
} 
.speech-bubble:after{ 
    content: ' '; 
    border-color: #999 transparent transparent; 
    border-style: solid; 
    border-width: 13px; 
    position: absolute; 
    bottom: -26px; 
    left: 20px; 
} 

Вот скрипка: http://jsfiddle.net/95vvr/

---

P.S. Не забывайте о префиксах производителя на производстве!

Answer 2

Вам нужно изображение с надстройкой и поместите это изображение абсолютно в нижнем правом углу.