タグ

関連タグで絞り込む (2)

タグの絞り込みを解除

斜線に関するgoto553のブックマーク (2)

  • CSS で table に斜線を引く方法

    CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル(クリックすればサンプルページに移動します) Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素(ここでは span)に position: absolute; を設定。 斜線(border)を適用する要素の前に &nbsp; を設定。&nbsp; がなかったり、要素の後方に&nbsp; があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t

  • 知らなかった…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