CODEWITHSUNDEEP
jquerycss
user2407400
user2407400

Reputation: 233

Add triangle to side of div with css

I need to add a triangle to the side of my current li in the menu. I set it up so I can edit the css of it with jquery, and want to know if it's possible to achieve this affect by editing the border on the li instead of adding a new div.

jsfiddle: I would like to get look of the second div by just adding borders to div-1

<div class="div-1"></div>
<br>
<div class="div-1"><div><div class="triangle"></div>

.div-1 {
    width:174px;
    height:32px;
    line-height:32px;
    margin-bottom:6px;
    display:block;
    background-color:#149dae;
}
.triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 16px 0 16px 16px;
    border-color: transparent transparent transparent #149dae;
    position:absolute;
    margin-left:174px;
}

Upvotes: 0

Views: 6024

Answers (3)

Rameez
Rameez

Reputation: 1712

Adding another div or element is necessary to get triangle shape inside another if you are not using a background image. Otherwise adding background image to li with a triangle shape which you want would be a clever idea.

Upvotes: 0

Gourav
Gourav

Reputation: 1774

Here is the fiddle http://jsfiddle.net/py3BU/4/ I have edited your code. This is what you were looking for? A triangle comes to side of the div which you hover.

Here's the code.

html code.

  <div class="div-1"></div>
  <br>
  <br /><div class="div-1"></div>

Here is the CSS code

.div-1 
{
    width:174px;
    height:32px;
    line-height:32px;
    margin-bottom:6px;
    display:block;
    background-color:#149dae;
}

 .div-1:hover 
 {
   width:158px;
   height: 0px;
   border-style: solid;
   border-width: 16px 0 16px 16px;
   border-color: transparent transparent transparent #85b375;
 }

I hope you wanted to achieve this.

Upvotes: 1

Mirage
Mirage

Reputation: 1487

You have not closed your div-1 fix that and then change display property of div-1 to inline-block as value and display:inline for triangle div.

That's it. it works.

JSFiddle link

Upvotes: 1

Related Questions