HTML – Css旋转文本是锯齿状的

概述任何想法如何让CSS旋转文本在Chrome中正确呈现？在Firefox中看起来可以接受. 删除阴影并不能解决问题,我也试图在没有运气的情况下调整转换起源. 在高分辨率屏幕上,它看起来也很好. .discount-trap { border-bottom: 33px solid #74c331; border-left: 33px solid transparent; border 任何想法如何让CSS旋转文本在Chrome中正确呈现？在firefox中看起来可以接受.

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

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

.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 >  <div  >    <div >Save 15%</div>    <div >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);

解决方法 Chrome默认情况下不启用消除锯齿功能.但是您可以将此CSS属性添加到元素中以启用它：

-webkit-backface-visibility: hIDden;

Fiddle

总结

以上是内存溢出为你收集整理的HTML – Css旋转文本是锯齿状的全部内容，希望文章能够帮你解决HTML – Css旋转文本是锯齿状的所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。