三角边界

Question

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

我的代码：

.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;
	
	top: 100%;
	left: 50%;
}

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

Answer 1

您正从左侧定位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>

Answer 2

因为两个伪元素的对齐是错误的，所以尝试使用它：

.news {

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

.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>