添加尖端按鈕時按鈕活性在HTML

Question

如何添加尖端的第二圖像時，它是活動的。我試過這個example來顯示提示，但我沒有幫助我的要求。

謝謝。

Answer 1

試試這個

HTML

<div id="pointed"> Arrow </div> 

CSS

#pointed { 
    position: relative; 
    margin: 0 auto; 
    width: 200px; 
    height: 200px; 
    background-color: black;color:white 
} 

#pointed::after { 
    position: absolute; 
    top: 100%; 
    left: 30%; 
    content: ''; 
    width: 0; 
    height: 0; 
    border-top: solid 10px black; 
    border-left: solid 10px transparent; 
    border-right: solid 10px transparent; 
} 

DEMO

Answer 2

try this 

<div id="pointed"> <a href="#">Arrow </a></div> 

#pointed { 
position: relative; 
margin: 0 auto; 
width: 200px; 
height: 200px; 
background-color: black;color:white 
      } 

#pointed:active::after { 
position: absolute; 
top: 100%; 
left: 45%; 
content: ''; 
width: 0; 
height: 0; 
border-top: solid 10px black; 
border-left: solid 10px transparent; 
border-right: solid 10px transparent; 
}