<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.up_arrow {
position:relative;
top:0;
left:0;
padding-left:15px;
}
.up_arrow:before {
content: "";
position: absolute;
top: 7px;
left: 2px;
width: 6px;
height: 5px;
background: #ffcc00;
}
.up_arrow:after {
content: "";
position: absolute;
top: 0px;
left: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 7px solid #ffcc00;
}
.down_arrow {
position:relative;
top:0;
left:0;
padding-left:15px;
}
.down_arrow:before{
content: "";
position: absolute;
top: 0px;
left: 2px;
width: 6px;
height: 5px;
background: #ffcc00;
}
.down_arrow:after{
content: "";
position: absolute;
top: 5px;
left: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #ffcc00;
}
</style>
</head>
<body>
<span class="up_arrow"> </span>
<span class="down_arrow"> </span>
</body>
</html>
参考サイト
cssだけで矢印や三角を表示http://tips.recatnap.info/sample/?URL=html007_border.html
0 件のコメント:
コメントを投稿