左边是圆形的CSS三角形边？

Question

我试图创建如下,无法完成它.

我只能设法在左边创建一个圆角但不能向右倾斜.

对齐顶部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;
 }

或者这里是 http://jsfiddle.net/alma/USezL/23/

Answer 1

我认为这就是你正在寻找的http://css-tricks.com/snippets/css/css-triangle/

\n\n

http://jsfiddle.net/zQKhb/

\n\n

#talkbubble \n{ \n    width: 100px;\n    height: 36px;\n    background: #FFCC05;\n    position: relative;\n    -moz-border-radius:8px 0 0 8px;\n    -webkit-border-radius:8px 0 0 8px;\n    border-radius:8px 0 0 8px;\n    margin-right:50px;\n\n} \n\n#talkbubble:before\n{\n    content:"";\n    display:block;\n    position: absolute;\n    right: -36px;\n    top:0;\n    width: 0;\n    height: 0;\n    border: 18px solid transparent;\n\n    border-color: transparent transparent #FFCC05 #FFCC05;\n}\n\xe2\x80\x8b\n

\n