0

私が作成しようとしている div のこのアイデアがあります。基本的にはこんな感じです。これをどのように作るつもりですか？それとも、単に画像を使用する必要がありますか? URL へのリダイレクトは、基本的に別の Web サイトへのリンクのみです。これもテーブルの上です。または、それが私が望んでいる方法ですが、より良い方法があれば教えてください!

          ______________
         /              \
        / REDIRECT TO URL\
_______/                  \________

これをどのように行うつもりですか？

4

2 に答える 2

1

この純粋なCSSソリューションはどうですか..

HTML

<div class="topLeft"></div>
<div class="topMidd">Hello</div>
<div class="topRight"></div>

CSS

*{
  font-size:14px;
}
.topLeft{
  float:left;
  border-right:1em red solid;
  border-top:2em transparent solid;
  width:0;
  height:0;
}
.topMidd{
  float:left;
  background:red;
  height:2em;
  line-height:2em;
  padding:0 2em;
}
.topRight{
  float:left;
  border-left:1em red solid;
  border-top:2em transparent solid;
  width:0;
  height:0;
}

いつでも数字で遊んで、好きなように手に入れることができます。これはクロスブラウザー ソリューションであり、画像を作成するのに苦労する必要がないことを意味します。

ここにJSFiddleがあります

于 2013-01-16T10:32:16.060 に答える
0

これは css3 などで実行できますが、ブラウザーの問題が発生します。

今のところ画像を使用しますが、テキストのサイズに合わせて拡大縮小できるようにしたい場合は、このように大まかにレイアウトすることをお勧めします.

<div class="holder">
<span class="block leftBlock"></span>
<span class="block innerBlock">REDIRECT TO URL</span>
<span class="block rightBlock"></span>
</div>

次に、あなたのcssで

.holder{height:heightOFImage;}
.block{float:left;height:100%;display:block;}
.leftBlock{background-image:url("leftImg.png");width:20px;}
.centerBlock{background-image:url("centerImg.png");background-repeat:repeat-x;}
.rightBlock{background-image:url("rightImg.png"); width:20px;}

画像デス

これは、長さの異なるすべてのタイプの文字列でこれを使用できることを意味します

于 2013-01-16T10:32:53.023 に答える