Is it possible to have a non-rectangular div?

Question

I need to shape ONE div tag in the following shape:

Is it possible to make it cross browser? I don\'t necessarily need rounded

Answer 1

Perhaps you could use Border-radius along with 2 or 3 div's to get the look you want. The only issue then is it's not supported in all browsers.

Answer 2

A one div solution using pseudo elements:

/* relevant styles for shape */
.tab {
  border-top-left-radius: 0px;
  margin-left: 100px;
}

.tab:before {
  content:"";
  display: block;
  position: relative;
  height: 50px;
  width: 50px;
  right: 52px; /* width + border width */
  top: -2px;
  background-color: white;
  border: inherit;
  border-right-width: 0px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

/* styles to look like example */
div{
  box-sizing: border-box;
  background-color: white;
  border: 2px solid red;
  height: 100px;
  width: 200px;
  border-radius: 5px;
}

div:hover {
  border-color: green;
}

<div class="tab"></div>

Answer 3

Yeah, you can do that using HTML and CSS like this: http://jsfiddle.net/broofa/364Eq/

It's essentially using three divs to aggregate the mouse events, like so:

<div id="outer">
  <div class="inner"></div>
  <div class="inner"></div>
</div>

And I use a :hover rule on the outer element to affect the border colors on the inner divs:

#outer .inner {border-color: red}
#outer:hover .inner {border-color: blue}

The only quirk with this markup is that the content area - the area you drew in your image - is that it's two divs, not one. So text won't wrap and flow the way you might expect. Also, this may not work so well on older (IE6-7) browsers. But FF, Chrome, Safari, Opera should probably be okay.

Answer 4

See this jsFiddle example:

<div id="main">    
    <div id="div1" class="border">
        &nbsp;
    </div>
    <div id="div2" class="border">
        &nbsp;
    </div>
</div>