image - 高级 CSS 或图像？

Question

我有一个我正在尝试制作的 div 的想法。这基本上是它的样子。你打算怎么做这个？还是我应该只使用图像？重定向到 URL 基本上只是指向另一个网站的链接。这也是一张桌子的顶部。或者这就是我想要的样子，但如果有更好的方法，请告诉！

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

你打算怎么做？

Answer 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

Answer 2

这可以在 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;}

这意味着您可以将其与所有不同类型的非长度字符串一起使用