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>

如何修复三角形的下端？

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>

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。

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

＆＃13;

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:";
}

＆＃13;

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

＆＃13;

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

2 个答案: