删除阴影并不能解决问题,我也试图在没有运气的情况下调整转换起源.

在高分辨率屏幕上,它看起来也很好.

.discount-trap {
   border-bottom: 33px solid #74c331;
   border-left: 33px solid transparent;
   border-right: 33px solid transparent;
   height: 0px;
   width: 150px;
   -webkit-transform: rotate(-315deg);
   -moz-transform: rotate(-315deg);
   -ms-transform: rotate(-315deg);
   -o-transform: rotate(-315deg);
   transform: rotate(-315deg);
   text-align: center;
   position: absolute;
   top: 25px;
   color: white;
   text-shadow: 0px 1px 2px black;
 }
 .discount-trap__header {
   font-size: 14px;
   margin-top: 2px;
 }
 .discount-trap__text {
   font-size: 10px;
 }

<div style="position: relative;">
  <div class="discount-trap" style="display: block;">
    <div class="discount-trap__header">Save 15%</div>
    <div class="discount-trap__text">Stay in Jul/Aug</div>
  </div>
</div>

Fiddle

更新：

它看起来像多个选项有效,它们都没有像Firefox一样流畅,但这正是Chrome问题.
选项1：
添加到.discount-trap
-webkit-backface-visibility：hidden;

选项2：
添加到-webkit-transform：rotate(-315deg);所以它变成-webkit-transform：rotate(-315deg)translate3d(0,0);