상위 요소 만 포함하는 하위 요소

Question

메뉴 항목이 활성 상태 및 마우스 오버 상태가되도록하려는 메뉴가 있습니다. 내 문제는 두 이미지에서 가장 잘 묘사됩니다. 녹색 배경색은 진한 주황색 영역 (이미지)입니다.

어떤 방법으로 녹색 요소의 바닥을 잘라하는 것이 좋습니다 : 내가 원하는 방법

그리고 이것은이다 :

이 내 메뉴는 지금 이 효과를 얻으려면?

지금까지 JSFIDDLE에 내 코드 :

http://jsfiddle.net/HC5qC/

CSS :이 FIDDLE 같은 당신이 시작 얻을 수 있습니다 경우

nav ul { 
    padding: 0; 
    list-style-type: none; 
    position: absolute; 
    right: 96px; 
    top: 37px; 
} 

nav li { 
    float: left; 
} 

nav a { 
    text-decoration: none; 
    font-weight: 400; 
    font-size: .9375em; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    color: #fff; 
    padding: 54px 15px 65px 15px; 
    overflow: hidden; 

} 

.current-menu-item a, 
.current-menu-item a:hover { 
    background: #79bd8f; /* Old browsers */ 
    background: -moz-linear-gradient(top, #79bd8f 30%, #00a388 99%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#79bd8f), color-stop(99%,#00a388)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* IE10+ */ 
    background: linear-gradient(to bottom, #79bd8f 30%,#00a388 99%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bd8f', endColorstr='#00a388',GradientType=0); /* IE6-9 */ 

} 

nav a:hover { 
    background: #6b1600; 
    background: rgba(107, 22, 0, 0.2); 
} 

Answer 1

궁금하다.

나는 우리가 당신이 원하는 것에 얼마나 가까이 다가 갈 수 있는지 좀 더 살펴볼 것입니다.

하지만 개념은 : after 또는 : before 또는 절대적으로 배치 된 "오버레이"를 넣고 뒤에 상자를 클릭 할 수있게하는 것입니다.

CSS

.selector { 
    width: 295px; 
    height: 100px; 
    overflow: hidden; 
    background-color: transparent; 
    position: relative; 
} 
.button1 { 
    float: left; 
    width: 32%; 
    height: 100%; 
    border: 1px solid white; 
    background-color: blue; 
} 
.selector:after { 
    content: ''; 
    width: 300px; 
    height: 30px; 
    position: absolute; 
    top: 85px; 
    left: 0px; 
    transform: rotate(-3deg); 
    background-color: red; 
}