1px欠けの角丸ボックスをCSSだけで作る方法｜web bibo
スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0px 1px; padding: 1px 0px; background: #0cc; } .inner { margin: 0px -1px; background: #0cc; } ボックスにボーダーを付ける場合 .outer { margin: 0px 1px; background: #E4F2FF; border-top: 1px solid #B1C6D9; border-bottom:
知らなかった…CSSのborderで斜めに線を引く方法:rynote
なんと画像を使わずにCSSのborderだけで、上のような吹き出しボックスが実現できてしまうようです！ 技術的には、border同士の重なりで斜め線を生み出して実現しているようですね。 ▼具体的なコードは以下のようになります CSS&HTML blockquote { margin: 0 0 50px 0; padding: 0;} blockquote#one { width: 250px; background: #e3e3e3; padding: 25px; position: relative;} /* 吹き出しの部分 */ blockquote#one .arrow { width: 0; height: 0; line-height: 0; border-top: 40px solid #e3e3e3; borde
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
