高级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;}

这意味着你可以将它用于所有不同类型的长度字符串