html - Facebook ステータスの矢印付きテキストボックスを作成するには?

Question

html と css のみで Facebook Status TextBox のような湾曲した TextBox を取得するにはどうすればよいですか?

誰でもその方法を説明できますか??

Answer 1

私のクロスブラウザ、Facebook スタイルのテキストボックスの CSS のみのバージョン:

---

方法

内部コンテナー div (7 ピクセルの折りたたまれた境界線、3 つの透明部分、1 つの白部分) で使用して:before、境界線が交差する三角形を作成し、それをテキスト ボックスのすぐ上に絶対配置で配置しました (テキスト ボックスの境界線をオーバーライドして「アタッチ」 "それへの三角形）。

この質問によると、Firefox が不要な境界線を配置するのを防ぐために、rgba代わりに使用する必要があります。transparent

次に、クロスブラウザーの方法で境界線を色付けするために:after、同じサイズの同じ三角形を、テキストボックスの境界線に似た色(*) で、白い三角形よりもわずか 1 ピクセル高く (一番上の位置に) 配置していました。 .

この時点で、z-indexプロパティを使用して灰色の三角形を白い三角形の下に配置し、「本体」(下の境界線) の 1 ピクセルのみが表示されるようにしました。

これにより、矢印に灰色の境界線が作成されました。

(*) 2 つの三角形を混合することによって生成される「明るくなる」効果のため、テキスト ボックスの境界線よりも少し暗い色を選択しました。#bbb の代わりに #888 を使用すると、元の色自体を使用するよりも、元の色に近い結果が得られます。

コメント付きのコードとデモは次のとおりです。

---

デモ

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 経由で配置することです。

入力フィールドにクラス tripled_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="" />

もちろん、必要に応じて三角形のオフセットを調整する必要があります。