如何在左侧div上创建一个尖三角形

时间:2014-06-27 08:20:23

标签: jquery css

我想问一下如何创建一个尖头div来显示用户的评论。尖头div应如下所示:

enter image description here

你知道吗?感谢

它应该显示为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;
}

3 个答案:

答案 0 :(得分:5)

三角形由边框属性生成,因此为了使其指向左侧,您需要将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/

答案 1 :(得分: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;
}

答案 2 :(得分:1)

此示例将缩放:)

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