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

Question

如何才能获得像Facebook Status TextBox这样的曲线TextBox，只有html和css？

任何人都能说明我该怎么做吗？

Answer 1

我的跨浏览器，仅限CSS版本的Facebook风格文本框：

---

如何

我在内部容器div（使用7px折叠边框，三个透明板，一个白色）上使用:before来创建一个边框相交的三角形，然后我将它放在文本框上，绝对定位（覆盖文本框的边框以将三角形“附加”到它上面。）

根据this question，应使用rgba代替transparent，以防止Firefox放置不需要的边框;

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

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

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

（*）我选择的颜色比文本框的边框颜色略深一些，因为混合两个三角形会产生“增亮”效果。 使用＃888代替#bbb，结果是可接受的，并且与原始颜色更相似，而不是使用原始颜色本身。

以下是注释代码和演示：

---

样本

http://jsfiddle.net/syTDv/

---

HTML

<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 */
}

希望有帮助...

Answer 2

有很多可能性：

我最喜欢的是获得符合您需求的三角形图像，然后通过css将其放在输入字段上方。

您可以修复它，为输入字段提供类triangled_input，将其设置为relative。并给三角形图像属性绝对。将偏移量更改为您想要的位置。

e.g。

<style>
.triangled_input{
position: relative;
}

.triangle{
position: absolute;
top: -10px;
left: 10px;
}
</style>

<input class="triangled_input" />
<img src="your_triangle.gif" class="triangle" alt="" />

当然，您必须调整三角形的偏移量以满足您的需求。