CSS로 작성된 태그 모양에서 흰색 배경을 제거하십시오.

나는 링크를 태그처럼 보이게 만드는 흥미로운 스 니펫을 수정했습니다. 문제는 배경이 흰색 인 경우에만 모양이 제대로 표시된다는 것입니다. 배경을 변경하는 순간 모양이 직사각형으로 바뀌어 모양이 손상됩니다.CSS로 작성된 태그 모양에서 흰색 배경을 제거하십시오.

더 나은 이해를 위해 코드 스 니펫 및 바이올린 예제를 살펴보십시오. 위의 코드에서

body { 
 
    font: 12px/1.5 'PT Sans', serif; 
 
    margin: 25px; 
 
    background: blue; /*the moment background is white, it's ok*/ 
 
} 
 

 
.tags { 
 
    list-style: none; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    padding: 0; 
 
} 
 

 
.tags li { 
 
    float: left; 
 
} 
 

 
.tag { 
 
    background: #eee; 
 
    border-radius: 3px 0 0 3px; 
 
    color: #999; 
 
    display: inline-block; 
 
    height: 26px; 
 
    line-height: 26px; 
 
    padding: 0 20px 0 23px; 
 
    position: relative; 
 
    margin: 0 10px 10px 0; 
 
    text-decoration: none; 
 
    -webkit-transition: color 0.2s; 
 
} 
 

 
.tag::before { 
 
    background: #fff; 
 
    border-radius: 10px; 
 
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.25); 
 
    content: ''; 
 
    height: 6px; 
 
    left: 10px; 
 
    position: absolute; 
 
    width: 6px; 
 
    top: 10px; 
 
} 
 

 
.tag::after { 
 
    background: #fff; 
 
    border-bottom: 13px solid transparent; 
 
    border-left: 10px solid #eee; 
 
    border-top: 13px solid transparent; 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.tag:hover { 
 
    background-color: crimson; 
 
    color: white; 
 
} 
 

 
.tag:hover::after { 
 
    border-left-color: crimson; 
 
}

<h2>Example 2</h2> 
 
<ul class="tags"> 
 
    <li><a href="#" class="tag">HTML</a></li> 
 
    <li><a href="#" class="tag">CSS</a></li> 
 
    <li><a href="#" class="tag">JavaScript</a></li> 
 
</ul>

, 당신은 CSS의 4 번째 줄에 흰색에 background을 변경하는 순간, 그것은 잘 작동합니다.

어떻게하면 모든 배경색으로 실행할 수 있습니까? 이것에

출처

2016-06-22 bholagabbar

변경 CSS :

body { 
 
     font: 12px/1.5 'PT Sans', serif; 
 
     margin: 25px; 
 
     background: blue; /*the moment background is white, it's ok*/ 
 
    } 
 
    
 
    .tags { 
 
     list-style: none; 
 
     margin: 0; 
 
     overflow: hidden; 
 
     padding: 0; 
 
    } 
 
    
 
    .tags li { 
 
     float: left; 
 
    } 
 
    
 
    .tag { 
 
     background: #eee; 
 
     border-radius: 3px 0 0 3px; 
 
     color: #999; 
 
     display: inline-block; 
 
     height: 26px; 
 
     line-height: 26px; 
 
     padding: 0 20px 0 23px; 
 
     position: relative; 
 
     margin: 0 20px 10px 0; 
 
     text-decoration: none; 
 
     -webkit-transition: color 0.2s; 
 
    } 
 
    
 
    .tag::before { 
 
     background: #fff; 
 
     border-radius: 10px; 
 
     box-shadow: inset 0 1px rgba(0, 0, 0, 0.25); 
 
     content: ''; 
 
     height: 6px; 
 
     left: 10px; 
 
     position: absolute; 
 
     width: 6px; 
 
     top: 10px; 
 
    } 
 
    
 
    .tag::after { 
 
     background: transparent; 
 
     border-bottom: 13px solid transparent; 
 
     border-left: 10px solid #eee; 
 
     border-top: 13px solid transparent; 
 
     content: ''; 
 
     position: absolute; 
 
     right: -10px; 
 
     top: 0; 
 
    } 
 
    
 
    .tag:hover { 
 
     background-color: crimson; 
 
     color: white; 
 
    } 
 
    
 
    .tag:hover::after { 
 
     border-left-color: crimson; 
 
    }

<h2>Example 2</h2> 
 
<ul class="tags"> 
 
    <li><a href="#" class="tag">HTML</a></li> 
 
    <li><a href="#" class="tag">CSS</a></li> 
 
    <li><a href="#" class="tag">JavaScript</a></li> 
 
</ul>

출처

2016-06-22 14:30:30

위대한 작품! 감사. 당신이 한 변화를 설명해 주시겠습니까? – bholagabbar

.tag :: after의 배경색이 흰색으로 설정되어 있습니다. border-color에 정의 된 css triangle 만 표시하므로이 배경을 투명하게 설정해야합니다. 그런 다음 태그 안에 포함되었으므로 태그에 더 높은 여백을 설정하고 태그 외부에 삼각형을 배치합니다. –

차가움. 어쨌든 우리는 그 태그의 작은 원을 투명하게 만들 수 있습니까? 의미에서 우리는 그것을 통해 배경을 볼 수 있습니다. 나는 물건을 변경하려고했지만 – bholagabbar

body { 
 
     font: 12px/1.5 'PT Sans', serif; 
 
     margin: 25px; 
 
     background: blue; /*the moment background is white, it's ok*/ 
 
    } 
 
    
 
    .tags { 
 
     list-style: none; 
 
     margin: 0; 
 
     overflow: hidden; 
 
     padding: 0; 
 
    } 
 
    
 
    .tags li { 
 
     float: left; 
 
    } 
 
    
 
    .tag { 
 
     background: #eee; 
 
     border-radius: 3px 0 0 3px; 
 
     color: #999; 
 
     display: inline-block; 
 
     height: 26px; 
 
     line-height: 26px; 
 
     padding: 0 20px 0 23px; 
 
     position: relative; 
 
     margin: 0 20px 10px 0; 
 
     text-decoration: none; 
 
     -webkit-transition: color 0.2s; 
 
    } 
 
    
 
    .tag::before { 
 
     background: blue; 
 
     border-radius: 10px; 
 
     box-shadow: inset 0 1px rgba(0, 0, 0, 0.25); 
 
     content: ''; 
 
     height: 6px; 
 
     left: 10px; 
 
     position: absolute; 
 
     width: 6px; 
 
     top: 10px; 
 
    } 
 
    
 
    .tag::after { 
 
     background: transparent; 
 
     border-bottom: 13px solid transparent; 
 
     border-left: 10px solid #eee; 
 
     border-top: 13px solid transparent; 
 
     content: ''; 
 
     position: absolute; 
 
     right: -10px; 
 
     top: 0; 
 
    } 
 
    
 
    .tag:hover { 
 
     background-color: crimson; 
 
     color: white; 
 
    } 
 
    
 
    .tag:hover::after { 
 
     border-left-color: crimson; 
 
    }

<h2>Example 2</h2> 
 
<ul class="tags"> 
 
    <li><a href="#" class="tag">HTML</a></li> 
 
    <li><a href="#" class="tag">CSS</a></li> 
 
    <li><a href="#" class="tag">JavaScript</a></li> 
 
</ul>

출처

2016-06-22 14:53:15

차갑다. 다시 한 번 감사드립니다! – bholagabbar

CSS로 작성된 태그 모양에서 흰색 배경을 제거하십시오.

답변

관련 문제