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

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>