【CSS】borderを使って、三角形作るのはやめませんか？ - Qiita
はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか？ borderを使って作っていませんか？ この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、本来のプロパティとは違う使い方でうつくしくないですよね！ この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 本来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と
CSSのみで！画像を使わないボタンアイコン - ホームページ制作会社 横浜 株式会社ウィル
CSS3と擬似要素を使って、普段リンクボタンなどでよく使う「▶」などのアイコンを画像を使わずに簡単実装する方法です。 元のボタンを形成するCSSとアイコンのCSSを分けて制作しておくと重宝します。 まずは、コピペで！ /* 角丸 */ .Radius5 { border-radius: 5px; /* CSS3草案 */ -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } /* ボタン共通 */ .Button { overflow: hidden; width: 250px; height: 50px; margin: 0; padding: 0; } .Button a { display: block; position: relative;
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; }
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
直角三角形
eky.hk
CSSの三角形でいろいろ作る
