Pure CSSで実装するコーナーリボン - NxWorld
要素や画像の角などに配置するコーナーリボンを、画像は使用せずにCSSのみで実装してみたものです。 HTMLとCSSで実装する場合は幅や位置の指定が若干面倒に感じることはありますが、その分カラー変更等も容易で角度なども自由に変更できます。 イメージにあるように、作成するのは「左上」「右上」「左下」「右下」の4パターンのコーナーリボンとなります。 「左下」「右下」に表示しているものは意図的にテキストを逆さに表示させていますが、通常の見栄えで良いのであれば後述するコードのtransform: rotate();の値を変更してください。 ここでは実装のコードのみ紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。 HTMLと共通CSS 紹介しているものは下記のようなHTMLを使用しており、共通のclassとして.ribbonを記述しています。 また、それに加えて例えば「左上」の場
CSSだけで三角形を作ろう！その2：吹き出しやリボンをデザインする | 株式会社グランフェアズ
Posted by NAGAYA on Sep 21st, 2017 こんにちは、めぐたんです。 前回は「CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター」と題して、なぜborderプロパティだけで三角形が作れるのか？どのような設定でどんな三角形ができるのか？を詳しく掘り下げてみました。 では、こうして作った三角形はWeb制作においてどんなときに活躍するのでしょうか？ よく見る利用例を挙げていきたいと思います。 はじめに：三角形を配置するポイント ご紹介するサンプルのラインナップは大きく分けて下記の3つです。 吹き出し ステップ表示 リボン風の装飾 上図のように、要素にくっつけて別の形を表現するという使い方が主だと思います。 この場合三角形自体にはコンテンツとして意味合いを持たないので、:beforeや:afterといった擬似要素として配置します。 また、位置調
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
