8

CSSで基本的な矢印を作成するには、これを行うことができることを知っています:

<div class="arrow-button">
    <span class="arrow-tip-container">
         <span class="arrow-tip"></span>
    </span>
</div>

次に、コンテナーを回転させて配置し、矢印の先端とBAM を埋めるだけです。そこに;甘い矢: http://jsfiddle.net/uF69S/

ただし、先端が事実上 120° の角度である矢印が必要なため、CSS 変換または 2 つの異なるコンテナーを使用してこの効果を達成することは可能ですか? たぶん、スキューと回転？

この矢印を作成したいと思います：

------------\
|            \
|            /
------------/

矢印が90° ではないことに注意してください。

注: 境界三角形を使用して三角形の任意の角度を作成できることは認識していますが、Firefox、Opera、または IE ではグラデーションをサポートしていませんが、Firefox、Opera、および IE は (何らかの方法で) 変換をサポートできます。

4

3 に答える 3

10

次のように、スキューを使用して120度の三角形を作成できます。

.arrow-tip {
    display:block;
    width:50px;
    height:50px;
    margin:0 0 0 -20px;
    -webkit-transform:rotate(45deg) skew(20deg,20deg);
 }

また： http： //jsfiddle.net/95Xq8/

于 2012-12-21T13:33:55.210 に答える
3

これは始まりかもしれません：

HTML:

<div>▲&lt;/div>​

CSS:

div {
  font-size: 46px;
  -webkit-transform: scaleY(.3);
}​

JSFiddleで見る

于 2012-12-20T16:03:10.927 に答える
1

HTML5 Canvas の使用に反対ですか? IE9+ でサポートされています ( caniuse ごと)。

これで始められます: http://www.dbp-consulting.com/tutorials/canvas/CanvasArrow.html

于 2012-12-20T16:10:39.277 に答える