如何在左边创建一个尖角的三角形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; 
}