如何在左邊創建一個尖角的三角形div

Question

我想問一下如何創建一個尖角的div來顯示用戶的註釋。尖DIV應該是這樣的：

你有什麼想法？謝謝

它應該看起來像this，但只是把三角形放在左邊不在頂部。

#pointed { 
position: relative; 
margin: 0 auto; 
width: 50px; 
height: 50px; 
padding: 4px; 
color: white; 
background-color: rgba(0,0,0,.8); 
} 

#pointed:after, 
#pointed::after { 
position: absolute; 
top: -5px; 
left: 22px; 
content: ''; 
width: 0; 
height: 0; 
border-bottom: solid 5px rgba(0,0,0,.8); 
border-left: solid 5px transparent; 
border-right: solid 5px transparent; 
} 

Answer 1

下面是相關的代碼和結果。檢查DEMO。

#pointed { 
position: relative; 
margin: 0 auto; 
width: 50px; 
height: 50px; 
padding: 4px; 
color: white; 
background-color: rgba(0,0,0,.8); 
} 

#pointed:after{ 
position: absolute; 
left:-10px; 
top: 18px; 
content: ''; 
width: 0; 
height: 0; 
border-right: solid 10px rgba(0,0,0,.8); 
border-bottom: solid 10px transparent; 
border-top: solid 10px transparent; 
} 

Answer 2

三角形是由邊框屬性生成的，所以將它指向離開你需要的CSS改變爲：

#pointed:after, 
#pointed::after { 
    position: absolute; 
    top: 5px; 
    left: -5px; 
    content: ''; 
    width: 0; 
    height: 0; 
    border-right: solid 5px rgba(0,0,0,.8); 
    border-bottom: solid 5px transparent; 
    border-top: solid 5px transparent; 
} 

http://jsfiddle.net/LN6zG/

欲瞭解更多有關三角形如何產生看看這裏http://css-tricks.com/snippets/css/css-triangle/

Answer 3

這個例子將規模:)

Have a fiddle!

Example with scale - triangle centered

HTML

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

CSS

#pointed { 
position: relative; 
margin: 0 auto; 
width: 50px; 
padding: 4px; 
color: white; 
background-color: rgba(0,0,0,.8); 
min-height: 40px; 
} 

#pointed:before { 
position: absolute; 
top: 50%; 
left: -5px; 
content: ''; 
width: 0; 
height: 0; 
margin: -5px 0 0; 
border-right: solid 5px rgba(0,0,0,.8); 
border-bottom: solid 5px transparent; 
border-top: solid 5px transparent; 
}