Html 徽章不是'；这不是一个完美的三角形

我写了一个代码来创建一个三角形徽章。它几乎可以工作了，只是低端被切断了

这是我的密码：

span{
边框：1px实心#999；
边界半径：5px；
显示：内联块；
填充：3px8px；
文字装饰：无；
}
纽巴奇先生{
右边框：50px实心透明！重要；
边框顶部：50px实心#777！重要；
高度：41px！重要；
左：0px；
位置：绝对位置；
顶部：0px；
}
.徽章文本{
颜色：#fff；
高度：90px；
左：0；
位置：绝对位置；
排名：0；
宽度：100px；
高度：90px；
}
.1文本强{
显示：块；
身高：100%；
左：37像素；
位置：相对位置；
-webkit变换：旋转（-45度）平移（0，-25%）；
-莫兹变换：旋转（-45度）平移（0，-25%）；
-ms变换：旋转（-45度）平移（0，-25%）；
-o变换：旋转（-45度）平移（0，-25%）；
变换：旋转（-45度）平移（0px，-25%）；
宽度：100%；
字体大小：12px；
底部：10px；
}

文本

我不得不调整一下。纽巴奇：

span{
边框：1px实心#999；
边界半径：5px；
显示：内联块；
填充：3px8px；
文字装饰：无；
}
纽巴奇先生{
右边框：80px实心透明！重要；
边框顶部：70px实心#777！重要；
高度：41px！重要；
左：-20px；
位置：绝对位置；
顶部：0px；
边框底部：无；
}
.徽章文本{
颜色：#fff；
高度：90px；
左：0；
位置：绝对位置；
排名：0；
宽度：100px；
高度：90px；
}
.1文本强{
显示：块；
身高：100%；
左：37像素；
位置：相对位置；
-webkit变换：旋转（-45度）平移（0，-25%）；
-莫兹变换：旋转（-45度）平移（0，-25%）；
-ms变换：旋转（-45度）平移（0，-25%）；
-o变换：旋转（-45度）平移（0，-25%）；
变换：旋转（-45度）平移（0px，-25%）；
宽度：100%；
字体大小：12px；
底部：10px；
}

文本

简短回答：删除徽章上的高度和填充，并使用左边框和下边框。

.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右上半径
和
border左下半径
设置为
0
将使其美观、锋利

详细回答：下角的截止线主要是由填充造成的，还有一点是由于边框半径和透明边框颜色（我无法告诉您原因）导致的浏览器渲染。我不认为有一种干净可靠的方法可以完全去除这些人工制品

相反，请重新排列边框的各个部分，以便更直接地创建所需的三角形。由于两条边是顶部和左侧，请为边界的顶部和左侧部分上色，然后使用未上色的对边将其对齐。将所有边框宽度设置为相同将使其保持均匀。每个边框的宽度将是边长的一半-由于原始边框宽度为50，左右边距各为8，因此新边框宽度为
（50+8+8）/2==33

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


span{
边框：1px实心#999；
边界半径：5px；
显示：内联块；
填充：3px8px；
文字装饰：无；
}
纽巴奇先生{
右边框：50px实心透明！重要；
边框顶部：50px实心#777！重要；
高度：41px！重要；
左：0px；
位置：绝对位置；
顶部：0px；
}
#纽巴奇{
/*填充和高度应为0，否则会干扰三角形*/
填充：0；
高度：0！重要；
/*因为三角形是顶部和左侧的，所以对边界的这些部分进行着色，并使用相同尺寸的未着色对边使三角形完美*/
边框顶部：33px实心#777！重要；
边框底部：33px实心透明！重要；
左边框：33px实心#777！重要；
右边框：33px实心透明！重要；
}
.徽章文本{
颜色：#fff；
高度：90px；
左：0；
位置：绝对位置；
排名：0；
宽度：100px；
高度：90px；
}
.1文本强{
显示：块；
身高：100%；
左：37像素；
位置：相对位置；
-webkit变换：旋转（-45度）平移（0，-25%）；
-莫兹变换：旋转（-45度）平移（0，-25%）；
-ms变换：旋转（-45度）平移（0，-25%）；
-o变换：旋转（-45度）平移（0，-25%）；
变换：旋转（-45度）平移（0px，-25%）；
宽度：100%；
字体大小：12px；
底部：10px；
}
/*剩下的只是为了得到并列的div进行比较*/
div{
位置：相对位置；
宽度：140px；
浮动：左；
边缘顶部：1.2米；
}
div：：之前{
显示：块；
位置：相对位置；
顶部：-1.2米；
}
#以前{
内容：“旧：”；
}
#新：：以前{
内容：“新：”；
}

文本
文本