Geek asks and answers

Change CSS border with transparency

I am trying to create an HTML / CSS menu in which the active link is displayed by the transparency section (pointer cut out from the border) to show the image behind the menu.

This is what I am going to do: http://larsakerson.com/northendgreenway/beta3.html

But with such a notched pointer: http://larsakerson.com/northendgreenway/beta2.html

Is there a way to do this in CSS (either 2.1 or 3), or is this a menu based solely on images, the only way to do this?

+3
source share
2 answers

You can make a jagged corner using such borders ...

div {
   width: 0;
   height: 0;
   border-width: 20px;
   border-style: solid;
   border-color:  transparent blue blue blue;
   background: transparent; 
}

jsFiddle .

jsFiddle , . .

+3

. http://jsfiddle.net/jalbertbowdenii/vnNXW/ .trapezoid .active: active {}

.trapezoid { 

    display:block;

    margin:0;

    padding:0;

    width:1px; 

    height:1px;

    background:transparent;

    border-style: solid;

     border-color:transparent #eee #eee #eee;

    border-width: 50px 50px 50px 50px;

}

. .active {border-color: transparent}

+1

More articles:


All Articles