9

CSSで先のとがった矢印を作成するにはどうすればよいですか? 三角形だけでなく、弓から放たれる伝統的な矢のような、茎のあるもの？

左と右の 2 つのコンテナーを含む div コンテナーを作成して、それを実行しようとしています。右側には三角形が含まれ、左側には 3 つの div が含まれ、その中心はステムを作成するために色付けされます。

これが私のコードです：

HTML:

<div id="main">
    <div class='arrowblock'>
        <div class='arrowright'></div>
        <div class='rectcontainer'>
            <div class='rect'></div>
            <div class='rect' style='background-color:green'>
            </div><div class='rect'>
            </div>
</div>

CSS:

.rectcontainer {
    height:30px;
    width:100px;
}

.arrowblock {
    width:130px;
    border-top: 15px solid transparent;
}
.arrowright {
float:right;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 30px solid green;
}
.rect {
    width:100px;
    height:10px;
    background-color:transparent;
}

これを達成するためのより簡単な方法はありますか？

4

5 に答える 5

3

これを作成しました。右向きの矢印に使用できます。

スクリプトには、widthofarrow と colorofarrow の 2 つの変数があります。これらを変更することで、任意のサイズまたは色の矢印を作成できます。

http://jsfiddle.net/FKekh/3/

HTML:

<!DOCTYPE html>
<div id="main"></div>

CSS:

.rectcontainer {
    height:30px;
}

.arrowblock {

}
.arrowright {
float:right;
    }
.rect {
    width:100px;
    height:10px;
    background-color:transparent;
}

ジャバスクリプト:

widthofarrow=130;
colorofarrow="#345678";

$("#main").append("<div class='arrowblock'><div class='arrowright'></div><div class='rectcontainer'><div class='rect'></div><div class='rect' style='background-color:" + colorofarrow + "'></div><div class='rect'></div></div></div>");


$('.arrowblock').css('width', widthofarrow + 'px');
$('.rectcontainer').css('width', (widthofarrow - (30)) + 'px');    
$('.arrowright').css('border-top', (15) + 'px solid transparent');
$('.arrowright').css('border-bottom', (15) + 'px solid transparent');
$('.arrowright').css('border-left', (widthofarrow/4.333333333333333) + 'px solid ' + colorofarrow);

編集

JoshC の優れたコードを更新して、さまざまなサイズと色の矢印を作成できるようにしました。

http://jsfiddle.net/fqcFp/2/

于 2013-09-15T19:18:52.067 に答える