Làm thế nào để thực hiện một: sau mũi tên chỉ là một phác thảo?

Question

tôi đã xem xét một fiddle đăng trên một câu hỏi về một năm rưỡi trước đây và đang tìm kiếm một chút giúp đỡ để hoàn thành tùy biến nó để làm thế nào tôi muốn nó.

http://jsfiddle.net/hyH48/641/

là có một cách để làm cho hình tam giác ở phía dưới chỉ là một biên giới của tam giác thay vì rắn? Hoặc là có một phương pháp khác tôi sẽ phải thực hiện để đạt được hiệu ứng này.

Answer 1

Hãy xem THS fiddle - http://jsfiddle.net/hyH48/688/

Tôi đã thêm một phần tử giả. Tôi đã cho nó cùng màu đường viền của các yếu tố background-colora, và đặt trên đỉnh của màu đã có ở đó.

Đây là HTML và CSS trong trường hợp bạn không thể nhìn thấy nó:

HTML:

<div id="mybox"> 
    This will be my tooltip 
</div>​ 

CSS:

#mybox { 
    position: relative; 
    width: XXXpx; 
    height: YYYpx; 
    border: 1px solid #000; 
    border-radius: 4px; 
    background-color: #fff; 
} 

#mybox:after, 
#mybox:before { 
    content: ""; 
    border-style: solid; 
    border-width: 10px; 
    width: 0; 
    height: 0; 
    position: absolute; 
    top: 100%; 
    left: 20px 
} 

#mybox:before { 
    border-color: #000 transparent transparent; /*non transparent color same as #mybox's border-color*/ 
} 

#mybox:after { 
    margin-top: -2px; 
    border-color: #fff transparent transparent; /*non transparent color same as #mybox's background-color*/ 
} 

Answer 2

Nhìn những gì tôi đã làm: jsFiddle.

Bạn có thể sử dụng: trước khi giả yếu tố để thực hiện biên giới của tam giác và a: sau để điền vào hình tam giác. Bạn chỉ cần thực hiện một vài chỉnh sửa đối với vị trí và các giá trị biên giới ở phần tử sau: để làm cho nó nhỏ hơn.

#mybox { 
    width:200px; 
    height:30px; 
    border-style:solid; 
    border-width:thin; 
    border-color:#000066; 
    border-radius: 4px; 
    position:relative; 
} 

#mybox:after{ // Our small triangle to fill the space 
    content:""; 
    border-color: #fff transparent transparent; 
    border-style:solid; 
    border-width:9px; 
    width:0; 
    height:0; 
    position:absolute; 
    bottom:-18px; 
    left:21px 
} 

#mybox:before{ 
    content:""; 
    border-color: #000066 transparent transparent; 
    border-style:solid; 
    border-width:10px; 
    width:0; 
    height:0; 
    position:absolute; 
    bottom:-20px; 
    left:20px 
} 
​