CSSだけで三角形を作ろう！その2：吹き出しやリボンをデザインする | 株式会社グランフェアズ
こんにちは、めぐたんです。 前回は「CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター」と題して、なぜborderプロパティだけで三角形が作れるのか？どのような設定でどんな三角形ができるのか？を詳しく掘り下げてみました。 では、こうして作った三角形はWeb制作においてどんなときに活躍するのでしょうか？ よく見る利用例を挙げていきたいと思います。 はじめに：三角形を配置するポイント ご紹介するサンプルのラインナップは大きく分けて下記の3つです。 吹き出し ステップ表示 リボン風の装飾 上図のように、要素にくっつけて別の形を表現するという使い方が主だと思います。 この場合三角形自体にはコンテンツとして意味合いを持たないので、:beforeや:afterといった擬似要素として配置します。 また、位置調整のためのpositionプロパティも抑えておきましょう。 利用例1：
CSSだけでできちゃう！ラベルデザイン「三角形編」 | Wand（わんど）：株式会社あんどぷらすのオウンドメディア
どうも、すんです。 例えばECサイト(ネットショップ)のデザインをするときに、「新商品」や「おすすめ！」など、商品にラベルや見出しをつけたくなることがあると思います。 こんな感じのシンプルなデザインだと物足りないというか、ちょっとさびしいですよね。 でも、色々な種類のラベルをつけたいけど全種類画像にして切り出してサイトに当てるのもめんどくさいな〜なんて思ってしまったり… 今回は、そんな時にcssのみで簡単に実装できちゃうラベルデザインを紹介していきたいと思います。 三角形のラベル /* 商品に見立てた枠 */ .triangle { background: #fafafa; width: 250px; height: 250px; border: #eee 1px solid; margin: 0 auto; position: relative; } /* ラベル部分 左上に表示 */
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
