Tam giác CSS tinh khiết có viền bán trong suốt. Khả thi?

Question

Có thể vẽ một mũi tên có viền bán trong suốt xung quanh nó chỉ bằng cách sử dụng css không?

Heres một fiddle nỗ lực của tôi cho đến nay: 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

này vẫn cần một số công việc, nhưng đây là ý tưởng chung:

Sử dụng một pseudo- phần tử, xoay nó 45 độ và áp dụng kiểu dáng cho rằng:

.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; 
} 

Đây là fiddle: http://jsfiddle.net/yZ3vB/

---

Vấn đề với điều này là biên giới chồng lên nhau, làm cho nó tối hơn bởi các cạnh.

Điều này có thể được khắc phục bằng cách thêm phần tử khác.

Cập nhật: Có! Ở đây bạn đi: http://jsfiddle.net/sJFTT/

---

Cập nhật 2: Bạn thậm chí không cần điều đó yếu tố bổ sung. Bạn có thể sử dụng các yếu tố giả từ hộp chính:

.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; 
} 

Đây là fiddle: http://jsfiddle.net/6v9nV/

---

Cập nhật 3: Trên thực tế, bạn có thể làm tất cả điều này chỉ với một yếu tố duy nhất và không biến đổi, bằng cách sử dụng cả hai phần tử giả - số before và 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; 
} 

Đây là fiddle: http://jsfiddle.net/95vvr/

---

T.B. Đừng quên các tiền tố của nhà cung cấp trong sản xuất!

Answer 2

Bạn cần hình ảnh nổi bật và đặt hình ảnh đó hoàn toàn ở góc dưới cùng bên phải.