如何创建 Facebook 状态箭头文本框？

Question

如何获得像 Facebook Status TextBox 这样仅包含 html 和 css 的弯曲文本框？

有人可以说明我该怎么做吗？

Answer 1

我的跨浏览器、仅 CSS 版本的 Facebook 样式文本框：

如何

我:before在内部容器 div（具有 7px 折叠边框、三个透明边框、一个白色边框）上使用了一个边框相交的三角形，然后将其放置在具有绝对定位的文本框上方（覆盖文本框的边框以“附加”） ” 的三角形）。

根据这个问题，rgba应该使用而不是transparent为了防止 Firefox 添加不需要的边框；

然后，为了以跨浏览器的方式为边框着色，我曾经:after放置一个相同的三角形，具有相同的大小，颜色与文本框的边框相似（*），仅比白色三角形高1px（在顶部位置） 。

此时，我已使用z-index属性将灰色三角形放置在白色三角形下方，这样只有 1px 的“主体”（底部边框）可见。

这为箭头创建了灰色边框。

(*) 我选择了一种比文本框边框稍暗的颜色，因为混合两个三角形会产生“增亮”效果。使用 #888 而不是 #bbb，结果是可以接受的，并且比使用原始颜色本身更接近原始颜色。

这是注释的代码和演示：

演示版

http://jsfiddle.net/syTDv/

超文本标记语言

<div id="fbContainer">
   <div class="facebookTriangle">  
      <input type="text" id="facebookTextbox" value="some text"/>
   </div>
</div>

CSS

body {
    padding: 30px;
}


/* With this container you can put the textbox anywhere on the page,
 without disturbing the triangles's absolute positioning */
#fbContainer{
  position: relative;
}


/* some adjustments to make the textbox more pretty */
#facebookTextbox{   
   border: 1px solid #bbb !important;
   padding: 5px;
   color: gray;
   font-size: 1em;
   width: 200px;
}


/* block element needed to apply :before and :after */
.facebookTriangle{
  height: 30px;
  padding-top: 10px;
}


/* white triangle */
/* collapsing borders (because of the empty content) 
   creates four triangles, three transparents and one coloured, 
   the bottom one */    
.facebookTriangle:before {
  content: '';
  border-style: solid;
  border-width: 7px;
  border-color: rgba(255,255,255,0) rgba(255,255,255,0) 
                white rgba(255,255,255,0);
  top: -3px;
  position: absolute;
  left: 7px;
  z-index: 2; /* stay in front */
}


/* gray triangle */
/* used as border for white triangle */
.facebookTriangle:after {
  content: '';
  border-style: solid;
  border-width: 7px;
  border-color: rgba(255,255,255,0) rgba(255,255,255,0) 
                #888 rgba(255,255,255,0);  
  top: -4px;
  position: absolute;
  left: 7px;
  z-index: 1; /* stay behind */
}

希望有帮助...