拐角色帶文本沒有正確居中（純CSS，沒有圖像）

Question

我創建了一個使用純CSS（無圖像）的功能區，但其中的文本未居中。文字：NEW現在僅部分可見。您只能讀取：NE

請參閱我的小提琴：http://jsfiddle.net/mauricederegt/8kv6v/

如何解決這個問題很新的功能區爲中心的文本？

親切的問候， 莫里斯

Answer 1

之所以這樣，就是div.ribbon-green很廣，並定位成其中心位於右側。 NEW中的E是div.ribbon-green的中心。因此，爲了讓NEW在顯示的包裝部分居中，我們必須移動div.ribbon-green的位置。我試着移動一下，發現下面的位置有效：

.ribbon-green { 
    left: -10px; 
    top: 5px; 
}