CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-shapes
Ilya Knaup
Ilya Knaup

Reputation: 171

Is it possible to have a non-rectangular div?

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

enter image description here

Is it possible to make it cross browser? I don't necessarily need rounded corners. I need it so I can change the color of the borders of the whole div on hover, so I assume it can't be achieved by using two divs.

Upvotes: 17

Views: 11056

Answers (10)

Ahsan Rathod
Ahsan Rathod

Reputation: 5505

See this jsFiddle example:

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

Upvotes: 2

sudo rm -rf slash
sudo rm -rf slash

Reputation: 1254

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>

Upvotes: 3

MikeM
MikeM

Reputation: 27405

Definitely requires two or three div's unless you use a background image

Here's a three-div solution

http://jsfiddle.net/pxfunc/SUuF6/

Its cross-browser compatible. The hover won't work in IE6, but it will in IE7+. The rounded corners will show based on browser support

HTML:

<div id="fancyShape">
    <div id="main">&lt;div&gt;</div>
    <div id="panHandle"></div>
</div>

CSS:

#fancyShape {position:relative;width:504px;height:304px;}

#main {
    margin-left:100px;
    width:400px;
    height:300px;
    border:solid 2px #000;
    border-radius:0 15px 15px 15px;

}
#panHandle {
    width:100px;
    height:120px;
    position:absolute;
    top:0;left:0;
    border-top:solid 2px #000;
    border-left:solid 2px #000;
    border-bottom:solid 2px #000;
    border-radius:15px 0 0 15px;
}

/* hover effect */
#fancyShape div {background-color:#fff;}
#fancyShape:hover div {background-color:#ff0;border-color:red;}

Upvotes: 1

AR.
AR.

Reputation: 1955

 <!DOCTYPE HTML>
 <html>
 <head>

 <style>
 html{height: 100%; width: 100%;}
 body{height: 100%; width: 100%;}

 #wrapper{
 position: relative;
 top: 50px;
 right: 25%;
 width: 565px;
 height: 440px;
 margin: 0 auto;
 padding: 0px;
 }
 #left{
 position: absolute;
 width: 100px;
 height: 50px;
 border: 2px solid black;
 border-right: none;
 -moz-border-radius-bottomleft: 10px; 
 border-bottom-left-radius: 10px;
 -moz-border-radius-topleft: 10px;
 border-top-left-radius: 10px;
 background-color: #ffffff;
 }
 #right{
 position: absolute;
 left: 100px;
 width: 440px;
 height: 440px;
 border: 2px solid black;
 -moz-border-radius: 10px;
 -moz-border-radius-topleft: 0px;
 border-top-left-radius: 0px;
 border-radius: 10px;
 padding-left: 25px;
 }
 </style>


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">    </script>
 <script type="text/javascript">
  $(document).ready(function(){
  $('#wrapper').hover(
   function () {
  $(this).children('#left').css({'border':'2px solid red', 'border-right':'none'});
  $(this).children('#right').css({'border':'2px solid red'});
  }, 
  function () {
  $(this).children('#left').css({'border':'2px solid black', 'border-right':'none'});
  $(this).children('#right').css({'border':'2px solid black'});
 });
 });
 </script>

 </head>
 <body>

 <div id="wrapper">
 <div id="right">Some content here</div>
 <div id = "left"></div>
 </div>

 </body>
 </html>

You can use CSSPIE for rounded orners for IE

Upvotes: 0

broofa
broofa

Reputation: 38132

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.

Upvotes: 12

Thomas Shields
Thomas Shields

Reputation: 8942

Use multiple divs, as others have suggested.

http://jsfiddle.net/thomas4g/7B5MA/14/

Keep in mind that it'll be very hard to flow content in this.

Upvotes: 0

DA.
DA.

Reputation: 40671

No. Divs are ALWAYS rectangular. You could fake it in a number of ways (using a background image would be one option).

As for using two DIVs, sure you could. The hover could be done with CSS3 and child selectors of a parent div or you could JavaScript to change the class of both divs when hovering over either one of them.

Upvotes: 1

Tim Meers
Tim Meers

Reputation: 928

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.

Upvotes: 0

thescientist
thescientist

Reputation: 2948

two options that I can think of:

1) give the div a background image and use CSS pseudo class :hover to change the background image to one that indicates a hover state

2) put three div's inside a wrapper, and position them so so you have one in the upper left hand corner, and then two stacked on top of each other, so that you can simulate the top half of a larger div missing the upper left half border. I don't think CSS alonw can target all the divs in order to change their borders, so will probably have to use JS to execute the hover behavior, by applying an event handler to all three divs.

Upvotes: 1

alquatoun
alquatoun

Reputation: 590

You can either use a map or use 2 divs and alter the borders so it looks like one shape.

Upvotes: 1

Related Questions