三角形边框

Question

我想用底部透明三角形编码新闻的div边框，但左三角形边框不等于正确，你能解释一下为什么或让我知道其他方式来编码吗？

我的代码：

.news { 
 

 
\t position: relative; 
 
\t margin: 75px auto; 
 
\t width: 200px; 
 
\t border: 1px #079199 solid; 
 
\t padding: 20px; 
 
\t 
 
\t color: #bcbcbc; 
 
\t 
 
\t word-wrap: break-word; 
 
\t 
 
} 
 

 
.news:after { 
 
\t 
 
\t position: absolute; 
 
\t content: ''; 
 

 
\t border: 25px solid transparent; 
 
\t border-top-color: #FFF; 
 
\t 
 
\t top: 100%; 
 
\t left: 50%; 
 
} 
 

 
.news:before { 
 
\t 
 
\t position: absolute; 
 
\t content: ''; 
 

 
    border-left: 26px solid transparent; 
 
    border-right: 26px solid transparent; 
 
    border-top: 26px solid; 
 
    border-top-color: #079199; 
 
\t 
 
\t top: 100%; 
 
\t left: 50%; 
 
}

<div class="news"> 
 
    TEST 
 
</div>

Answer 1

这样做是因为这两个伪元素的排列是错误的，尝试使用此：

.news { 
 

 
\t position: relative; 
 
\t margin: 75px auto; 
 
\t width: 200px; 
 
\t border: 1px #079199 solid; 
 
\t padding: 20px; 
 
\t 
 
\t color: #bcbcbc; 
 
\t 
 
\t word-wrap: break-word; 
 
\t 
 
} 
 

 
.news:after, 
 
.news:before { 
 
    position: absolute; 
 
    content: ''; 
 
    border: 25px solid transparent; 
 
    border-top-color: #ffffff; 
 
    
 
    top: 100%; 
 
    left: 50%; 
 
    
 
    transform: translateX(-50%); 
 
} 
 

 
.news:before { 
 
    border: 26px solid transparent; 
 
    border-top-color: #079199; 
 
}

<div class="news"> 
 
    TEST 
 
</div>

Answer 2

你从左侧定位都50%。为了看到边框，你必须补偿左边稍微少一点的彩色:before三角形。

我们可以通过施加负margin-left

.news { 
 
    position: relative; 
 
    margin: 75px auto; 
 
    width: 200px; 
 
    border: 1px #079199 solid; 
 
    padding: 20px; 
 
    color: #bcbcbc; 
 
    word-wrap: break-word; 
 
} 
 

 
.news:after { 
 
    position: absolute; 
 
    content: ''; 
 
    border: 25px solid transparent; 
 
    border-top-color: #FFF; 
 
    top: 100%; 
 
    left: 50%; 
 
} 
 

 
.news:before { 
 
    position: absolute; 
 
    content: ''; 
 
    border-left: 26px solid transparent; 
 
    border-right: 26px solid transparent; 
 
    border-top: 26px solid; 
 
    border-top-color: #079199; 
 
    margin-left: -1px; 
 
    top: 100%; 
 
    left: 50%; 
 
}

<div class="news"> 
 
    TEST 
 
</div>