我正在尝试按照以下方式创建它,但无法完成它。
我只能设法在左边创建一个圆角但不能向右倾斜。
align top http://www.kerrydeaf.com/arrow.png
#talkbubble
{
width: 100px;
height: 35px;
background: #FFCC05;
position: relative;
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
margin-right:50px;
}
答案 0 :(得分:3)
我认为这就是你要找的http://css-tricks.com/snippets/css/css-triangle/
#talkbubble
{
width: 100px;
height: 36px;
background: #FFCC05;
position: relative;
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
margin-right:50px;
}
#talkbubble:before
{
content:"";
display:block;
position: absolute;
right: -36px;
top:0;
width: 0;
height: 0;
border: 18px solid transparent;
border-color: transparent transparent #FFCC05 #FFCC05;
}
答案 1 :(得分:2)
你错过了右边三角形中的一些关键点。首先,默认情况下a:before元素为display: inline
,因此要创建您需要display: block
所需的效果。
其次,right: 120px
将其移动到原始位置右侧120像素。也就是说,它被推向左侧,不在视野范围内。相反,你需要一个负面的正确位置(移动到右边)100%(讲话泡泡的宽度)。这样,它就结束了它的权利。
第三,不确定你的形状是什么,但几乎所有东西都是三角形;)。
我选择了这个:
#talkbubble:before
{
content:" ";
display: block;
position: relative;
right: -100%;
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 20px solid transparent;
border-bottom: 35px solid #FFCC05;
}
第一部分是定位,第二部分是创建实际三角形(见http://css-tricks.com/snippets/css/css-triangle/)。
在jsfiddle中我将三角形设为蓝色,这样你就能看到它的确切位置。更改边框右边的宽度以使角度更大。 http://jsfiddle.net/USezL/31/