三角形边框答案

【问题标题】：Triangle border三角形边框
【发布时间】：2017-03-05 23:17:07
【问题描述】：

我想用底部透明三角形编写新闻的 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>

【问题讨论】：

也许我很困惑，但是哪里有一个三角形？

标签： html css

【解决方案1】：

因为两个伪元素的对齐方式不对，试试这个：

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

【讨论】：

感谢您的帮助 :)

【解决方案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>

【讨论】：