「cssだけで矢印や三角を表示」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

cssだけで矢印や三角を表示

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>cssだけで矢印や三角を表示</title>
  7. <style type="text/css">
  8. /* 矢印 */
  9. .sample1{
  10.   position:relative;
  11.   top:0;
  12.   left:0;
  13.   padding-left:15px;
  14. }
  15. .sample1:before{
  16.   content: "";
  17.   position: absolute;
  18.   top: 4px;
  19.   left: 0;
  20.   width: 5px;
  21.   height: 6px;
  22.   background: #ffcc00;
  23. }
  24. .sample1:after{
  25.   content: "";
  26.   position: absolute;
  27.   top: 0;
  28.   left: 5px;
  29.   border-top: 7px solid transparent;
  30.   border-bottom: 7px solid transparent;
  31.   border-left: 7px solid #ffcc00;
  32. }
  34. /* 色違い */
  35. .sample2{
  36.   position:relative;
  37.   top:0;
  38.   left:0;
  39.   padding-left:15px;
  40. }
  41. .sample2:after{
  42.   content: "";
  43.   position: absolute;
  44.   top: 0;
  45.   left: 0;
  46.   border-top: 7px solid #ff00cc;
  47.   border-bottom: 7px solid #ffcc00;
  48.   border-left: 7px solid #00ffcc;
  49.   border-right: 7px solid #cc00ff;
  50. }
  52. /* 三角矢印を前（Front）に（左向き：Left）でつける */
  53. .arrowFL{
  54.   position:relative;
  55.   top:0;
  56.   left:0;
  57.   padding-left:18px;
  58. }
  59. .arrowFL:before{
  60.   content: "";
  61.   position: absolute;
  62.   top: 0;
  63.   left: 2px;
  64.   border-top: 7px solid transparent;
  65.   border-bottom: 7px solid transparent;
  66.   border-right: 12px solid #ffcc00;
  67. }
  69. /* 三角矢印を前（Front）に（右向き：Right）でつける */
  70. .arrowFR{
  71.   position:relative;
  72.   top:0;
  73.   left:0;
  74.   padding-left:18px;
  75. }
  76. .arrowFR:before{
  77.   content: "";
  78.   position: absolute;
  79.   top: 0;
  80.   left: 2px;
  81.   border-top: 7px solid transparent;
  82.   border-bottom: 7px solid transparent;
  83.   border-left: 12px solid #ffcc00;
  84. }
  86. /* 三角矢印を前（Front）に（上向き：Up）でつける */
  87. .arrowFU{
  88.   position:relative;
  89.   top:0;
  90.   left:0;
  91.   padding-left:18px;
  92. }
  93. .arrowFU:before{
  94.   content: "";
  95.   position: absolute;
  96.   top: 0;
  97.   left: 0;
  98.   border-left: 7px solid transparent;
  99.   border-right: 7px solid transparent;
  100.   border-bottom: 12px solid #ffcc00;
  101. }
  103. /* 三角矢印を前（Front）に（下向き：Down）でつける */
  104. .arrowFD{
  105.   position:relative;
  106.   top:0;
  107.   left:0;
  108.   padding-left:18px;
  109. }
  110. .arrowFD:before{
  111.   content: "";
  112.   position: absolute;
  113.   top: 0;
  114.   left: 0;
  115.   border-left: 7px solid transparent;
  116.   border-right: 7px solid transparent;
  117.   border-top: 12px solid #ffcc00;
  118. }
  120. /* 三角矢印を後ろ（Back）に（左向き：Left）でつける */
  121. .arrowBL{
  122.   position:relative;
  123.   top:0;
  124.   left:0;
  125.   padding-right:18px;
  126. }
  127. .arrowBL:before{
  128.   content: "";
  129.   position: absolute;
  130.   top: 0;
  131.   right: 0;
  132.   border-top: 7px solid transparent;
  133.   border-bottom: 7px solid transparent;
  134.   border-right: 12px solid #ffcc00;
  135. }
  137. /* 三角矢印を後ろ（Back）に（右向き：Right）でつける */
  138. .arrowBR{
  139.   position:relative;
  140.   top:0;
  141.   left:0;
  142.   padding-right:18px;
  143. }
  144. .arrowBR:before{
  145.   content: "";
  146.   position: absolute;
  147.   top: 0;
  148.   right: 0;
  149.   border-top: 7px solid transparent;
  150.   border-bottom: 7px solid transparent;
  151.   border-left: 12px solid #ffcc00;
  152. }
  154. /* 三角矢印を後ろ（Back）に（上向き：Up）でつける */
  155. .arrowBU{
  156.   position:relative;
  157.   top:0;
  158.   left:0;
  159.   padding-right:18px;
  160. }
  161. .arrowBU:before{
  162.   content: "";
  163.   position: absolute;
  164.   top: 0;
  165.   right: 0;
  166.   border-left: 7px solid transparent;
  167.   border-right: 7px solid transparent;
  168.   border-bottom: 12px solid #ffcc00;
  169. }
  171. /* 三角矢印を後ろ（Back）に（下向き：Down）でつける */
  172. .arrowBD{
  173.   position:relative;
  174.   top:0;
  175.   left:0;
  176.   padding-right:18px;
  177. }
  178. .arrowBD:before{
  179.   content: "";
  180.   position: absolute;
  181.   top: 0;
  182.   right: 0;
  183.   border-left: 7px solid transparent;
  184.   border-right: 7px solid transparent;
  185.   border-top: 12px solid #ffcc00;
  186. }
  188. /* 前（Front）でリンク */
  189. a.arrowFL:hover{background-color:#ffddff;}
  190. a.arrowFR:hover{background-color:#ffddff;}
  191. a.arrowFU:hover{background-color:#ffddff;}
  192. a.arrowFD:hover{background-color:#ffddff;}
  193. a.arrowFL:hover:before{border-right-color:#6666ff;}
  194. a.arrowFR:hover:before{border-left-color:#6666ff;}
  195. a.arrowFU:hover:before{border-bottom-color:#6666ff;}
  196. a.arrowFD:hover:before{border-top-color:#6666ff;}
  198. /* 後ろ（Back）でリンク */
  199. a.arrowBL:hover{background-color:#ffddff;}
  200. a.arrowBR:hover{background-color:#ffddff;}
  201. a.arrowBU:hover{background-color:#ffddff;}
  202. a.arrowBD:hover{background-color:#ffddff;}
  203. a.arrowBL:hover:before{border-right-color:#6666ff;}
  204. a.arrowBR:hover:before{border-left-color:#6666ff;}
  205. a.arrowBU:hover:before{border-bottom-color:#6666ff;}
  206. a.arrowBD:hover:before{border-top-color:#6666ff;}
  208. </style>
  209. </head>
  210. <body>
  211. <h1>cssだけで矢印や三角を表示</h1>
  213. <div style="line-height:1.5; border:1px solid #ccc;padding:10px;">
  214. <h2>三角矢印の基本</h2>
  215. <h3>前付き</h3>
  216. <span class="arrowFL">三角矢印を前（Front）に（左向き：Left）でつける</span><br>
  217. <span class="arrowFR">三角矢印を前（Front）に（右向き：Right）でつける</span><br>
  218. <span class="arrowFU">三角矢印を前（Front）に（上向き：Up）でつける</span><br>
  219. <span class="arrowFD">三角矢印を前（Front）に（下向き：Down）でつける</span><br>
  221. <h3>後ろ付き</h3>
  222. <span class="arrowBL">三角矢印を後ろ（Back）に（左向き：Left）でつける</span><br>
  223. <span class="arrowBR">三角矢印を後ろ（Back）に（右向き：Right）でつける</span><br>
  224. <span class="arrowBU">三角矢印を後ろ（Back）に（上向き：Up）でつける</span><br>
  225. <span class="arrowBD">三角矢印を後ろ（Back）に（下向き：Down）でつける</span><br>
  227. <h3>前付きのaタグ</h3>
  228. <a href="#" class="arrowFL">三角矢印を前（Front）に（左向き：Left）でつける</a><br>
  229. <a href="#" class="arrowFR">三角矢印を前（Front）に（右向き：Right）でつける</a><br>
  230. <a href="#" class="arrowFU">三角矢印を前（Front）に（上向き：Up）でつける</a><br>
  231. <a href="#" class="arrowFD">三角矢印を前（Front）に（下向き：Down）でつける</a><br>
  233. <h3>後ろ付きのaタグ</h3>
  234. <a href="#" class="arrowBL">三角矢印を後ろ（Back）に（左向き：Left）でつける</a><br>
  235. <a href="#" class="arrowBR">三角矢印を後ろ（Back）に（右向き：Right）でつける</a><br>
  236. <a href="#" class="arrowBU">三角矢印を後ろ（Back）に（上向き：Up）でつける</a><br>
  237. <a href="#" class="arrowBD">三角矢印を後ろ（Back）に（下向き：Down）でつける</a><br>
  239. <h2>その他</h2>
  240. <span class="sample1">矢印のサンプル</span><br>
  241. <span class="sample2">色違い</span><br>
  242. </div>
  244. <h2>普通に線を上下と左右で色違いにしたもの</h2>
  245. <div style="padding:10px;
  246.             border-top:10px solid red;     border-left:10px solid green;
  247.             border-right:10px solid green; border-bottom:10px solid red;">
  248. aaaaa</div>
  250. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  251. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  252. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  253. </div>
  255. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  256. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  257. </div>
  259. </body>
  260. </html>