徽章不是一个完美的三角形。

Question

我写了一段代码来创建一个三角形徽章。它几乎可以工作，只是底部有点被切掉了。

以下是我的代码：

span {
  border: 1px solid #999;
  border-radius: 5px;
  display: inline-block;
  padding: 3px 8px;
  text-decoration: none;
}

.newBadge {
  border-right: 50px solid transparent !important;
  border-top: 50px solid #777 !important;
  height: 41px !important;
  left: 0px;
  position: absolute;
  top: 0px;
}

.badgeText {
  color: #fff;
  height: 90px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100px;
  height: 90px;
}

.badgeText strong {
  display: block;
  height: 100%;
  left: 37px;
  position: relative;
  -webkit-transform: rotate(-45deg) translate(0, -25%);
  -moz-transform: rotate(-45deg) translate(0, -25%);
  -ms-transform: rotate(-45deg) translate(0, -25%);
  -o-transform: rotate(-45deg) translate(0, -25%);
  transform: rotate(-45deg) translate(0px, -25%);
  width: 100%;
  font-size: 12px;
  bottom: 10px;
}  

<span class="newBadge"></span>
<span class="badgeText">
  <strong>Text</strong>
</span>  

我该如何修复三角形的下端？

- Ajay Kulkarni

Answer 1

我需要稍微调整一下.newBadge：

span {
  border: 1px solid #999;
  border-radius: 5px;
  display: inline-block;
  padding: 3px 8px;
  text-decoration: none;


}

.newBadge {
  border-right: 80px solid transparent !important;
  border-top: 70px solid #777 !important;
  height: 41px !important;
  left: -20px;
  position: absolute;
  top: 0px;
  border-bottom:none;
}

.badgeText {
  color: #fff;
  height: 90px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100px;
  height: 90px;
}

.badgeText strong {
  display: block;
  height: 100%;
  left: 37px;
  position: relative;
  -webkit-transform: rotate(-45deg) translate(0, -25%);
  -moz-transform: rotate(-45deg) translate(0, -25%);
  -ms-transform: rotate(-45deg) translate(0, -25%);
  -o-transform: rotate(-45deg) translate(0, -25%);
  transform: rotate(-45deg) translate(0px, -25%);
  width: 100%;
  font-size: 12px;
  bottom:10px;
}  

<span class="newBadge"></span>
<span class="badgeText">
  <strong>Text</strong>
</span>  

所以，向左移动一点，增加边框，就可以解决问题了吗？此外，border-bottom设置为none，因为它是从span继承的...

另外，不确定，但如果您可以使用固定的徽章尺寸，我建议使用更简单（更干净）的HTML/CSS：https://jsfiddle.net/9o00a553/

div {
  border: 1px solid #999;
  border-radius: 5px;
  display: inline-block;
  padding: 3px 8px;
  text-decoration: none;
  width:100px;
  height:100px;
  position:relative;
overflow:hidden;
  margin:50px;
}
div:before {
  content:"";
  color:white;
  transform: rotate(-45deg);
  position:absolute;
  background:red;
  width:100%;
  height:100%;

 
  left:-50%;
  top:-50%;
}
span {
   transform: rotate(-45deg);
   color:white;
   position:absolute;
   z-index:3;
  left:12px;
   top:20px;
}

<div>
<span class="text">text</span>
</div>  

- sinisake

Answer 2

简短回答： 移除徽章的高度和内边距，同时使用左侧和底部边框。修改后的.newBadge样式将如下所示：

.newBadge {
  padding: 0;
  border-top: 33px solid #777 !important;
  border-bottom: 33px solid transparent !important;
  border-left: 33px solid #777 !important;
  border-right: 33px solid transparent !important;
  height: 0 !important;
  left: 0px;
  position: absolute;
  top: 0px;
}

非常仔细地观察，您可能会注意到右下角看起来有点被切掉了；这是由于 border-radius。将 border-top-right-radius 和 border-bottom-left-radius 设置为 0 将使它们变得漂亮而锐利。

更长的答案：底部角落的截断主要是由内边距引起的，还有一点是由于浏览器渲染由于边框半径和透明边框颜色而导致的（我无法告诉您为什么）。我认为没有一种干净可靠的方法可以完全摆脱这些伪像。

相反，重新排列边框的部分以更直接地创建所需的三角形。由于两条腿是顶部和左侧，所以对边框的顶部和左侧进行着色，然后使用未着色的相反侧来使其成为正方形。设置所有边框宽度相同将使其保持均匀。每个边框的宽度将是边长的一半-因为原始边框宽度为50，左右内边距各为8，所以新边框宽度为 (50 + 8 + 8) / 2 == 33。

片段显示了原始和更改后的结果的比较。更改每个边框片段的颜色，以查看每个片段的贡献。

span {
  border: 1px solid #999;
  border-radius: 5px;
  display: inline-block;
  padding: 3px 8px;
  text-decoration: none;
}

.newBadge {
  border-right: 50px solid transparent !important;
  border-top: 50px solid #777 !important;
  height: 41px !important;
  left: 0px;
  position: absolute;
  top: 0px;
}

#new .newBadge {
  /* padding and height should be 0, or they will interfere with the triangle */
  padding: 0;
  height: 0 !important;
  /* Since the triangle is top and left, color those parts of the border, and use the opposite sides uncolored with the same dimensions to make the triangle perfect */
  border-top: 33px solid #777 !important;
  border-bottom: 33px solid transparent !important;
  border-left: 33px solid #777 !important;
  border-right: 33px solid transparent !important;
}

.badgeText {
  color: #fff;
  height: 90px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100px;
  height: 90px;
}

.badgeText strong {
  display: block;
  height: 100%;
  left: 37px;
  position: relative;
  -webkit-transform: rotate(-45deg) translate(0, -25%);
  -moz-transform: rotate(-45deg) translate(0, -25%);
  -ms-transform: rotate(-45deg) translate(0, -25%);
  -o-transform: rotate(-45deg) translate(0, -25%);
  transform: rotate(-45deg) translate(0px, -25%);
  width: 100%;
  font-size: 12px;
  bottom: 10px;
}

/* The rest is just to get the side-by-side divs for comparison. */
div {
  position: relative;
  width: 140px;
  float: left;
  margin-top: 1.2em;
}
div::before {
  display: block;
  position: relative;
  top: -1.2em;
}
#old::before {
  content: "Old:";
}
#new::before {
  content: "New:";
}

<div id="old">
  <span class="newBadge"></span>
  <span class="badgeText">
    <strong>Text</strong>
  </span>
</div>
<div id="new">
  <span class="newBadge"></span>
  <span class="badgeText">
    <strong>Text</strong>
  </span>
</div>

- Reinstate Monica -- notmaynard