사실적인 투명 배경을 가진 CSS 삼각형 만들기

나는 비 정렬 목록으로 구성된 가로 메뉴를 가지고 있으며, 각 목록 항목은 링크이고 잘 확장 가능한 특수 확장 목록 항목이 있습니다 (새 세로 스타일 메뉴). 메뉴 배경을 투명하게 검정색으로하고 아래쪽에 흰색 테두리가 있도록하고 싶습니다. 확장 가능한 목록 항목에 아래쪽 화살표가 튀어 나오길 원합니다. 안타깝게도 바깥 쪽 삼각형을 흰색으로 설정하고 안쪽 삼각형을 투명 검정색으로 설정하면 아래에 흰색 삼각형이 표시됩니다. 메뉴가 배경 이미지 나 텍스처에 배치 될 수 있도록 정말 투명한 내부 삼각형을 얻는 방법이 있습니까?사실적인 투명 배경을 가진 CSS 삼각형 만들기

http://jsfiddle.net/RMCtk/2/

HTML :

<body> 
      <nav> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About</a></li> 
        <li class="expand"><a href="#">Product</a> 
          <ul> 
           <li><a href="#">pro1</a></li> 
           <li><a href="#">pro2</a></li> 
           <li><a href="#">pro3</a></li> 
          </ul> 
        </li> 
        <li><a href="#">lalalalalalala</a></li> 
        <li><a href="#">Pickles</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 
</body>

CSS :

nav { 
    top:50px; 
    line-height:20px; 
    font-size:20px; 
    width:calc(6*150px); 
    height:auto; 
    box-sizing:border-box; 
    } 
    nav ul { 
    margin:0;padding:0; 
    list-style-type:none; 
    } 
    nav ul li { 
    border:1px solid blue; 
    border-right:none;border-top:none;border-left:none; 
    float:left; 
    width:150px; 
    background-color:white; 
    box-sizing:border-box; 
    } 
    nav ul li a { 
    display:block; 
    width:150px; 
    padding:5px 0; 
    text-align:center; 
    } 
    nav ul li:hover { 
    background:orange; 
    } 
    nav ul li ul { 
    display:none; 
    } 
    nav ul li:hover > ul { 
    display:block; 
    position:absolute; 
    left:-450px+900px; /*margin-left + width of #nav*/ 
    top:30px; 
    width:150px; 
    } 
    a:link, a:visited { 
    color:black; 
    font-family:Arial; 
    text-decoration:none; 
    } 
    li.expand:before { 
    content:''; 
    position:absolute; 
    height:0; 
    width:0; 
    border-left:15px solid transparent; /* left arrow slant */ 
    border-right:15px solid transparent; /* right arrow slant */ 
    border-top:15px solid blue; /*bg color here*/ 
    margin-left:60px; /*75-15*/ 
    margin-top:29px; 
    } 
    li.expand:after { 
    content:''; 
    position:absolute; 
    height:0; 
    width:0; 
    border-left:14px solid transparent; /* left arrow slant */ 
    border-right:14px solid transparent; /* right arrow slant */ 
    border-top:14px solid rgba(0,0,0,0.5); /*bg color here*/ 
    margin-left:60.5px; 
    } 
    li.expand:hover:after,li.expand:hover:before { 
    display:none; 
    }

당신이 예에서 볼 수 있듯이, 국경이 파란색, 배경이 투명하고, WHITE NOT해야한다. 흰색은 jsfiddle 콘텐츠 상자의 배경과 일치하지만 투명도는 있지만 실제 투명도는 아닙니다. 이 일을 할 수 없다면 누구나이 일을 할 수있는 '적절한'방법을 제안 할 수 있습니까?

출처

2013-06-07 E.Cross

삼각형을 만드는 데 사용한 트릭은 테두리 너비를 조작하는 것입니다. 화살표 은 국경이입니다. 테두리 색을 설정할 수 없습니다 (내가 정확히 무엇을 의미하는지 이해한다면).

출처

2013-06-07 10:11:07 xec

아니요,하지만 여기서 한 것은 작은 삼각형 아래에 큰 삼각형을 만드는 것입니다. 이런 식으로 큰 삼각형은 더 작은 삼각형의 "테두리"를 형성하고 작은 삼각형은 더 큰 삼각형을위한 '배경'을 만듭니다 –

사실적인 투명 배경을 가진 CSS 삼각형 만들기

답변

관련 문제