transform:skew()でひし形を作る方法 - Qiita
「CSSでひし形を作る方法」を探すと、正方形を45度回転させる例ばかり見つかって「正方形を回したのがひし形？？？」と思った人へ。 transform:skew()をどうぞ。 transform:skew()で作るひし形 skew()には(90deg - 欲しい角度) / 2を与えます。 ブロックレベル要素は元から内角90degの長方形なので、90degからの差分を指定します。 X軸方向・Y軸方向の両方で傾けるので、それぞれに指定する角度は1/2になります。 <div class="diamond"></div> <style> .diamond { display: block; width: 5rem; height: 5rem; background: gray; transform: skew( calc((90deg - 30deg) / 2), calc((90deg - 30d
slick.jsのdots、arrowsのカスタマイズ方法
以前にslick.jsに関することを2つ書きましたが、今回はもっと絞って「arrows」と「dots」のカスタマイズ方法について紹介します。 以前のslick.jsに関する記事は下記の2つです。 よく使うjQueryプラグイン① 「slick.js」 「slick.js」の使い方応用編 追加で「slick.jsでサムネイル付きスライダーを作成する」も書きました。サムネイルを固定した場合のスライダーのサンプルも紹介しています。 arrowsのカスタマイズ方法 arrowsのカスタマイズ方法はすごく簡単です。これはカスタマイズができるようにもともとオプションが用意されています。 オプションについてはこちらから確認してください。 slick.jsのオプションの箇所に下記のように記述すれば好きな画像をarrowsに設定できます。 $(function(){ $("#slider").slick({
CSSだけで細い矢印を作る方法【下向き矢印・右向き矢印】
index.css.Arrow{ margin-left 14px; /*なくてもOK*/ position: relative; height: 80px; } .Arrow-Item{ position: absolute; left: 1px; display: block; width: 2px; border-radius: 1px; background: #e2264d; } .Arrow-Item:nth-of-type(1){ top: 0; height: 80px; } .Arrow-Item:nth-of-type(2){ bottom: 0; height: 30px; transform: rotate(30deg); } .Arrow-Item:nth-of-type(3){ bottom: 0; height: 32px; transform: rotate
cssだけでselectとシンプルな矢印 - Qiita
<div class="selectWrap"> <select class="select" name="" id=""> <option value="">001</option> <option value="">002</option> <option value="">003</option> </select> </div> .selectWrap{ width: 100%; position: relative; display: inline-block; } .selectWrap::after { content: ''; width: 6px; height: 6px; border: 0px; border-bottom: solid 2px #b4b3b3; border-right: solid 2px #b4b3b3; -ms-transform: rotat
【CSS】三角アイコンと矢印アイコンをつくる | 125naroom / デザインするところ（会社）です。
.arrow_s { position: relative; display: inline-block; padding-left: 12px; color: #333; text-decoration: none; } .arrow_s:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #333; position: absolute; top: 50%; left: 0; margin-top: -6px; }
CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン
最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、｢カスタマイズやメンテナンスが容易」｢レスポンシブWebデザインとも相性が良い」｢画像を読み込まないのでモバイルユーザーにも優しい」｢Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次： 共通HTML＆CSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン（大） シンプルな太い矢印アイコン シンプルな太い矢印アイコン（大） 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン（大） 右下向きの矢印アイコン 右下向きの矢印アイコン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
