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

【问题标题】：How to create the Facebook Status arrowed textbox?如何创建 Facebook 状态箭头文本框？
【发布时间】：2015-06-15 22:35:14
【问题描述】：

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

谁能告诉我怎么做？？

【问题讨论】：

试试 firebug 看看那种东西会更有帮助

标签： html css textbox css-shapes

【解决方案1】：

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

如何

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

根据this question，应该使用rgba而不是transparent，以防止Firefox放置不需要的边框；

然后，为了以跨浏览器的方式为边框着色，我使用:after 放置一个相同的三角形，大小相同，颜色相似(*) 到文本框的边框，仅比白色三角形高 1 像素（在顶部位置）。

此时，我已使用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 */
}

希望对您有所帮助...

【讨论】：

【解决方案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="" />

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

【讨论】：