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

2022-01-13 00:00:00 textbox html css css-shapes

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

How can I get a curved TextBox like the Facebook Status TextBox with html and css only?

谁能告诉我怎么做??

推荐答案

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

My Cross-Browser, CSS-only version of the Facebook-style textbox:

如何

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

I've used :before on the inner container div (with 7px collapsed borders, three transparents, one white) to create a triangle where the borders intersect themselves, then i placed it just over the textbox with absolute positioning (overriding the textbox's border to "attach" the triangle to it).

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

According to this question, rgba should be used instead of transparent in order to prevent Firefox to put an unwanted border;

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

Then, for coloring the border in a cross-browser way, i used :after to place an identical triangle, with the same size, with a color similar(*) to the textbox's borders, just 1px higher (in top position) than the white triangle.

此时，我已使用 z-index 属性将灰色三角形置于白色三角形下方，以便其主体"(底部边框)只有 1px 可见.

At this point, i've used z-index property to place the gray triangle UNDER the white triangle, so that only 1px of its "body" (the bottom border) would have been visible.

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

This created the gray border to the arrow.

(*) 我选择的颜色比文本框的边框颜色深一点，因为混合两个三角形会产生增亮"效果.使用#888 而不是#bbb，结果是可以接受的，并且比使用原始颜色本身更类似于原始颜色.

(*) I've chosen a color a bit darker than the textbox's borders one, because of the "brightening" effect generated by mixing the two triangles. With #888 instead of #bbb, the result is acceptable and more similar to the original color than using the original color itself.

这里是注释代码和演示:

Here is the commented code and the demo:

演示

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

希望对您有所帮助...

Hope that helps...

相关文章