「cssだけで矢印や三角を表示」を別ウィンドウで開く
各種サンプルとソース一覧
|
PCスキルの小技・忘却防止メモ
|
cssだけで矢印や三角を表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>cssだけで矢印や三角を表示</title>
<style type="text/css">
/* 矢印 */
.sample1{
position:relative;
top:0;
left:0;
padding-left:15px;
}
.sample1:before{
content: "";
position: absolute;
top: 4px;
left: 0;
width: 5px;
height: 6px;
background: #ffcc00;
}
.sample1:after{
content: "";
position: absolute;
top: 0;
left: 5px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #ffcc00;
}
/* 色違い */
.sample2{
position:relative;
top:0;
left:0;
padding-left:15px;
}
.sample2:after{
content: "";
position: absolute;
top: 0;
left: 0;
border-top: 7px solid #ff00cc;
border-bottom: 7px solid #ffcc00;
border-left: 7px solid #00ffcc;
border-right: 7px solid #cc00ff;
}
/* 三角矢印を前(Front)に(左向き:Left)でつける */
.arrowFL{
position:relative;
top:0;
left:0;
padding-left:18px;
}
.arrowFL:before{
content: "";
position: absolute;
top: 0;
left: 2px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 12px solid #ffcc00;
}
/* 三角矢印を前(Front)に(右向き:Right)でつける */
.arrowFR{
position:relative;
top:0;
left:0;
padding-left:18px;
}
.arrowFR:before{
content: "";
position: absolute;
top: 0;
left: 2px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 12px solid #ffcc00;
}
/* 三角矢印を前(Front)に(上向き:Up)でつける */
.arrowFU{
position:relative;
top:0;
left:0;
padding-left:18px;
}
.arrowFU:before{
content: "";
position: absolute;
top: 0;
left: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 12px solid #ffcc00;
}
/* 三角矢印を前(Front)に(下向き:Down)でつける */
.arrowFD{
position:relative;
top:0;
left:0;
padding-left:18px;
}
.arrowFD:before{
content: "";
position: absolute;
top: 0;
left: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 12px solid #ffcc00;
}
/* 三角矢印を後ろ(Back)に(左向き:Left)でつける */
.arrowBL{
position:relative;
top:0;
left:0;
padding-right:18px;
}
.arrowBL:before{
content: "";
position: absolute;
top: 0;
right: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 12px solid #ffcc00;
}
/* 三角矢印を後ろ(Back)に(右向き:Right)でつける */
.arrowBR{
position:relative;
top:0;
left:0;
padding-right:18px;
}
.arrowBR:before{
content: "";
position: absolute;
top: 0;
right: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 12px solid #ffcc00;
}
/* 三角矢印を後ろ(Back)に(上向き:Up)でつける */
.arrowBU{
position:relative;
top:0;
left:0;
padding-right:18px;
}
.arrowBU:before{
content: "";
position: absolute;
top: 0;
right: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 12px solid #ffcc00;
}
/* 三角矢印を後ろ(Back)に(下向き:Down)でつける */
.arrowBD{
position:relative;
top:0;
left:0;
padding-right:18px;
}
.arrowBD:before{
content: "";
position: absolute;
top: 0;
right: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 12px solid #ffcc00;
}
/* 前(Front)でリンク */
a.arrowFL:hover{background-color:#ffddff;}
a.arrowFR:hover{background-color:#ffddff;}
a.arrowFU:hover{background-color:#ffddff;}
a.arrowFD:hover{background-color:#ffddff;}
a.arrowFL:hover:before{border-right-color:#6666ff;}
a.arrowFR:hover:before{border-left-color:#6666ff;}
a.arrowFU:hover:before{border-bottom-color:#6666ff;}
a.arrowFD:hover:before{border-top-color:#6666ff;}
/* 後ろ(Back)でリンク */
a.arrowBL:hover{background-color:#ffddff;}
a.arrowBR:hover{background-color:#ffddff;}
a.arrowBU:hover{background-color:#ffddff;}
a.arrowBD:hover{background-color:#ffddff;}
a.arrowBL:hover:before{border-right-color:#6666ff;}
a.arrowBR:hover:before{border-left-color:#6666ff;}
a.arrowBU:hover:before{border-bottom-color:#6666ff;}
a.arrowBD:hover:before{border-top-color:#6666ff;}
</style>
</head>
<body>
<h1>cssだけで矢印や三角を表示</h1>
<div style="line-height:1.5; border:1px solid #ccc;padding:10px;">
<h2>三角矢印の基本</h2>
<h3>前付き</h3>
<span class="arrowFL">三角矢印を前(Front)に(左向き:Left)でつける</span><br>
<span class="arrowFR">三角矢印を前(Front)に(右向き:Right)でつける</span><br>
<span class="arrowFU">三角矢印を前(Front)に(上向き:Up)でつける</span><br>
<span class="arrowFD">三角矢印を前(Front)に(下向き:Down)でつける</span><br>
<h3>後ろ付き</h3>
<span class="arrowBL">三角矢印を後ろ(Back)に(左向き:Left)でつける</span><br>
<span class="arrowBR">三角矢印を後ろ(Back)に(右向き:Right)でつける</span><br>
<span class="arrowBU">三角矢印を後ろ(Back)に(上向き:Up)でつける</span><br>
<span class="arrowBD">三角矢印を後ろ(Back)に(下向き:Down)でつける</span><br>
<h3>前付きのaタグ</h3>
<a href="#" class="arrowFL">三角矢印を前(Front)に(左向き:Left)でつける</a><br>
<a href="#" class="arrowFR">三角矢印を前(Front)に(右向き:Right)でつける</a><br>
<a href="#" class="arrowFU">三角矢印を前(Front)に(上向き:Up)でつける</a><br>
<a href="#" class="arrowFD">三角矢印を前(Front)に(下向き:Down)でつける</a><br>
<h3>後ろ付きのaタグ</h3>
<a href="#" class="arrowBL">三角矢印を後ろ(Back)に(左向き:Left)でつける</a><br>
<a href="#" class="arrowBR">三角矢印を後ろ(Back)に(右向き:Right)でつける</a><br>
<a href="#" class="arrowBU">三角矢印を後ろ(Back)に(上向き:Up)でつける</a><br>
<a href="#" class="arrowBD">三角矢印を後ろ(Back)に(下向き:Down)でつける</a><br>
<h2>その他</h2>
<span class="sample1">矢印のサンプル</span><br>
<span class="sample2">色違い</span><br>
</div>
<h2>普通に線を上下と左右で色違いにしたもの</h2>
<div style="padding:10px;
border-top:10px solid red; border-left:10px solid green;
border-right:10px solid green; border-bottom:10px solid red;">
aaaaa</div>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
Copyright © 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
</div>
</body>
</html>