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

Question

我怎样才能得到一个弯曲的文本框，比如只有 html 和 css 的 Facebook 状态文本框？

任何人都可以说明我如何做到这一点？

Answer 1

我的跨浏览器，Facebook 样式文本框的纯 CSS 版本：

---

如何

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

根据这个问题，rgba应该使用代替transparent以防止Firefox放置不需要的边框；

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

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

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

(*) 我选择的颜色比文本框的边框颜色深一点，因为混合两个三角形会产生“增亮”效果。使用#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，将其设置为相对。并赋予三角形图像绝对属性。更改偏移量，直到它位于您想要的位置。

例如

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

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