Javascript

CSSでdivを使用して先のとがった矢印を作成するにはどうすればよいですか？



How Can I Make Pointy Arrow With Div Css



解決：

これが純粋な矢印です CSS 。による支援 全て ブラウザ。作るのに1分もかかりませんでした。

ここに画像の説明を入力してください



jsFiddle 

.arrow {幅：120px; } .line {margin-top：14px;幅：90px;背景：青;高さ：10px;フロート：左; } .point {幅：0;高さ：0; border-top：20pxソリッド透明; border-bottom：20pxソリッド透明; border-left：30pxソリッドブルー;フロート：右; }
   
これを作成しました。これは、右向きの矢印に使用できます。
 
 
 
スクリプトには、widthofarrowとcolorofarrowの2つの変数があります。これらを変更することで、任意のサイズまたは色の矢印を作成できます。
 
http://jsfiddle.net/FKekh/3/
 
HTML：
 
 
 
  
CSS：
 
.rectcontainer {height：30px; } .arrowblock {} .arrowright {float：right; } .rect {width：100px;高さ：10px;背景色：透明; }
JavaScript：
 
widthofarrow = 130; colorofarrow = '＃345678'; $（ '＃main'）。append（ ''）; $（ '。arrowblock'）。css（ 'width'、widthofarrow + 'px'）; $（ '。rectcontainer'）。css（ 'width'、（widthofarrow-（30））+ 'px'）; $（ '。arrowright'）。css（ 'border-top'、（15）+ 'px solidtransparent'）; $（ '。arrowright'）。css（ 'border-bottom'、（15）+ 'px solidtransparent'）; $（ '。arrowright'）。css（ 'border-left'、（widthofarrow / 4.333333333333333）+ 'px solid' + colorofarrow）;
編集
 
JoshCの優れたコードを更新して、さまざまなサイズと色の矢印を作成できるようにしました。
 
http://jsfiddle.net/fqcFp/2/
  
矢印にhtmlエンティティまたはUnicode記号を使用するのはどうですか。
 
→↣div{font-size：40px; }
  フィドル  
 
ここから選択することがもっとあります