三角を矢印3つならべる クリック誘導マークCSS


スポンサーリンク

 

 

テキストリンクを誘導する矢印をCSSで作ってみる。
画像を使うとかっこいいけど、持ち運びが不便なので、さくさくっと記事をアップして公開したいときに便利。

 

CSSでつくる三角形をつかうことで簡単にできる。
右寄せ、左寄せも簡単にできるようにDIV でくくってある。

 

リンクテキスト

 

ソース
<div class="box"><div class="borders"></div><div class="borders"></div><div class="borders"></div><div class="linktext">リンクテキスト</div><br clear="all"><div style="clear:both;"></div></div>

<style>
.box{
margin-left: 600px; /* 位置調整 */
margin-right: 0px;
height:32px;
border:1px solid #fff;
}
.borders{
    width: 0;
    height: 0;
    border-top: 16px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 16px solid #fff;
    border-left: 16px solid #ff5500;
float:left;
}
.linktext{
padding:0 0 0 5px;
font-size:18px;
font-weight:bold;
float:left;
 line-height: 32px;
}
</style>

 

 

スポンサーリンク