CSS границы с прозрачностью

Question

Я пытаюсь создать меню HTML / CSS, в котором активная ссылка обозначена разделом прозрачности (указатель зарезан за границей), чтобы показать изображение за меню.

Вот к чему я иду: http://larsakerson.com/northendgreenway/beta3.html

Но с таким указателем с надрезом: http://larsakerson.com/northendgreenway/beta2.html

Есть ли способ сделать это в CSS (2.1 или 3), или меню, основанное исключительно на изображениях, - единственный способ заставить это работать?

Answer 1

Вы можете сделать зазубренный угол, используя границы, например ...

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

jsFiddle .

Обратитесь к jsFiddle и обратите внимание, что верхний угол пропускает фон. Просто адаптируйте этот пример к своему сайту.

Answer 2

вот ты, чувак.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: прозрачный}