सीएसएस घुमावदार पाठ jaggy

Question

कोई विचार है कि क्रोम में सही ढंग से प्रस्तुत करने के लिए सीएसएस घुमाए गए पाठ को कैसे प्राप्त किया जाए? फ़ायरफ़ॉक्स में यह स्वीकार्य लगता है।

छाया को हटाने से समस्या ठीक नहीं होती है और मैंने भाग्य के बिना संक्रमण-उत्पत्ति को समायोजित करने का भी प्रयास किया है।

उच्च रिज़ॉल्यूशन स्क्रीन पर यह भी ठीक दिखता है।

.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 के रूप में चिकनी हैं, लेकिन वे ठीक से एक क्रोम मुद्दा है। विकल्प 1: .discount-trap -webkit-backface-visibility: छुपाएं;

विकल्प 2: -webkit-transform में जोड़ें: घुमाएं (-315deg); तो यह बन जाता है -webkit-transform: rotate (-315deg) translate3d (0, 0, 0);

Answer 1

क्रोम डिफ़ॉल्ट रूप से एंटी-एलियासिंग सक्षम नहीं करता है। लेकिन तुम क्रम में यह सक्षम करने के लिए अपने तत्वों को यह सीएसएस संपत्ति जोड़ सकते हैं:

-webkit-backface-visibility: hidden; 

Fiddle

Answer 2

आप एक मूल -webkit-transform-origin: 50% 50%;

बदलने .discount-trap

है कि जोड़ने तब तो डी करने के लिए पर वेबकिट ब्राउज़र की चौड़ाई प्रभाव के बदलने किसी कारण से प्रतिपादन .discount-trap

की चौड़ाई के साथ चारों ओर एक मेस है याद कर रहे हैं इसे दबाएं और अपने पत्र को संरेखित करें, इसके साथ आपको इसके साथ गड़बड़ करने की आवश्यकता होगी जब तक कि इसे प्रस्तुत करने के तरीके को प्रस्तुत न किया जाए।

अपने अक्षरों के & संख्या को नृत्य करने से रोकने के लिए लाइन ऊंचाई भी सेट करें।

उदा। line-height:1;

Answer 3

आप translate3d प्रॉपर्टी जोड़ते हैं, यह कलंक के बिना पाठ प्रस्तुत करना होगा ...

.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) translate3d(0, 0, 0); 
 
    -moz-transform: rotate(-315deg) translate3d(0, 0, 0); 
 
    -ms-transform: rotate(-315deg) translate3d(0, 0, 0); 
 
    -o-transform: rotate(-315deg) translate3d(0, 0, 0); 
 
    transform: rotate(-315deg) translate3d(0, 0, 0); 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 25px; 
 
    color: white; 
 
    text-shadow: 0px 1px 2px black; 
 
}