Image 高级CSS还是图像？

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

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

---

你打算怎么做？

这个纯CSS解决方案怎么样

HTML

你可以一直玩数字游戏来得到你想要的结果。这是一个跨浏览器的解决方案，它意味着你不需要乱造图像

---

下面是一个

这可以在css3等中完成，但会遇到浏览器问题

我现在会使用一个图像，但是如果你想它对于任何文本大小都是好的和可伸缩的，我建议大致如下

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

---

这意味着您可以将其用于所有不同类型的超长字符串

我会使用image，因为它是一种跨浏览器解决方案。我想这将是最快也是最简单的方法。然而，你对如何使用CSS来实现这一点有什么想法吗。这相当困难吗？我认为使用

：before

和

：after

并不困难……但是使用图像肯定是一种更好的方法？直到我们仍然有很多用户使用旧IE和其他旧浏览器，是的，这是一种更好的方法。很好！您可以使用

em

单元而不是

px

使其更加灵活，这样尺寸将自动适应字体大小。@JukkaK.Korpela很高兴您喜欢，建议不错！编辑制作。感谢您的代码片段，但我不会以任何方式使用它。检查！；=）谢谢你给我一个很好的例子，也谢谢你的解释，不过我已经改变了我的方法，我也不会做任何事情，谢谢！

*{
  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;
}

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

.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;}