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

我怎样才能得到一个像Facebook状态文本框这样的曲线文本框，它只包含html和css

---

有人能给我举例说明怎么做吗？？？

有很多可能性：

我更喜欢的方法是得到一个适合你需要的三角形图像，然后通过css将其放在输入字段上方

您可以修复它，将输入字段设置为类三角形输入，将其设置为相对。并赋予三角形图像绝对属性。更改偏移量，直到它位于您想要的位置

e、 g

.三角输入{
位置：相对位置；
}
.三角形{
位置：绝对位置；
顶部：-10px；
左：10px；
}

---

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

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

---

如何

我在内部容器div上使用了

：before

（7px折叠边框，三个透明，一个白色）创建了一个三角形，其中边框相交，然后我将其放置在文本框上，并进行绝对定位（覆盖文本框的边框，将三角形“附着”到文本框上）

据介绍，

rgba

应该使用而不是

transparent

，以防止Firefox放置不需要的边框

然后，为了以跨浏览器的方式为边框着色，我使用

：after

放置了一个相同的三角形，大小相同，颜色与文本框的边框类似（*），仅比白色三角形高1倍（在顶部位置）

此时，我使用了

z-index

属性将灰色三角形放置在白色三角形下，这样就只能看到其“主体”（底部边框）的1px

这为箭头创建了灰色边框

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

以下是注释代码和演示：

---

演示

---

HTML

---

希望这能有所帮助……

试试firebug，看看它能帮上什么忙

<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="" />

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

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