画像を使わずにcssだけで矢印や三角を表示

2012/06/15

上下と左右の線の交差する箇所が斜めになってくれるのでそれを利用する。

サンプル

  1. /* 三角矢印を前（Front）に（左向き：Left）でつける */
  2. .arrowFL{
  3.   position:relative;
  4.   top:0;
  5.   left:0;
  6.   padding-left:18px;
  7. }
  8. .arrowFL:before{
  9.   content: "";
  10.   position: absolute;
  11.   top: 0;
  12.   left: 2px;
  13.   border-top: 7px solid transparent;
  14.   border-bottom: 7px solid transparent;
  15.   border-right: 12px solid #ffcc00;
  16. }
他のサンプルとソース：cssだけで矢印や三角を表示

新着（ニュース関連以外）

2018-07-26
冬真っただ中の年賀状の「新春」
年賀状で「新春」とか書くけど・・・何故なんだろうと8月を目前にした今、疑問に思った。
2018-05-16
PHP 画像の回転とヘッダ情報の関連：Orientationとimagerotate()とimagejpeg()
PHPで画像のヘッダ情報（？）の「Orientation」を元に画像回転させたい。
2018-03-05
WinPCにAndroid Studioをインストールする
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
ServiceWorkerについてのメモ
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryでdomを配列で受け取るためのメモ
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい

ニュース関連の新着

各種記事（昨日：2021/10/26）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/25）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/22）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/21）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/20）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/19）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/18）盛り合わせ：SEOとか。
各種記事（昨日：2021/10/16）盛り合わせ：SEOとか。

Copyright© 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.