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

Question

如何仅使用 html 和 css 获得像 Facebook 状态文本框这样的 flex 文本框？

谁能告诉我该怎么做？？

Answer 1

我的跨浏览器，Facebook 风格文本框的纯 CSS 版本:

---

如何

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

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

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

此时，我使用了 z-index 属性将灰色三 Angular 形放在白色三 Angular 形下面，这样它的“主体”(底部边框)只有 1px 是可见的.

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

(*) 我选择了一种比文本框边框颜色深一点的颜色，因为混合两个三 Angular 形会产生“增亮”效果。 使用 #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 */
}

希望对您有所帮助...