No perfect triangle icon

Question

I wrote code to create a triangular icon. It almost works, only the lower end is cut off.

Here is my code:

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>  

Run codeHide result

How to fix the bottom end of a triangle?

Answer 1

I had to adjust .newBadge a bit:

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>  

Run codeHide result

So, moving to the left side, a little more and increasing the boundaries, did the trick, it seems? In addition, border-bottom is set to none because it is inherited from span ...

Also, not sure, but if you can work with fixed icon sizes, I would suggest much simpler (cleaner) 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>  

Run codeHide result

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>

Hide result