Question

I have this idea of a div I’m trying to make. This is basically how it looks like.
How would you intend to make this? Or should I simply just use a image?
Redirect to URL is basically only a link to another website. This is also the top of a table. Or that’s how I want it to be, but if any better ways, please tell!

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

How do you intend to do this?

Answer 1

How about this pure CSS solution..

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

You can always play with the numbers to get how you want it. It’s a cross-browser solution and it means you don’t need to mess around making images.

Here is a JSFiddle