直通式/穿透式造型

我正在一個網站上有一個服務頁面，其中有幾個商品相應地定價。直通式/穿透式造型

price

由於該網站是一個負責任的佈局，並根據設備上它被......我正在尋找一種方法來創建HTML，CSS，JavaScript的上面的例子中看到的文本改變或類似的東西，而不訴諸使用的圖像，如JPG，PNG等

我發現很難創建這個，因爲有一個像這樣的角度線，這是一種不同的顏色，並控制它厚度/重量..我可以得到的最好是與它的父母的顏色的細線，有什麼建議嗎？

2012-10-08 user1752759

有可能用CSS3轉換，當然沒有IE的支持，但你可以用一個PNG作爲後備舊的瀏覽器：

span { position: relative; } 
span:after { 
    content: ""; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    margin-top: -3px; /* height/2 */ 
    width: 100%; 
    height: 7px; /* Adjust */ 
    background: red; 
    -webkit-transform: rotateZ(-10deg); 
    -moz-transform: rotateZ(-10deg); 
}

來源

2012-10-08 03:22:00 elclanrs

你如何指定這個後備？像這樣的一個回退如何工作？ – Derik

只需爲舊IE加載單獨的樣式。 https://gist.github.com/3850588 – elclanrs

偉大的思想家都一樣。剛剛將這種方法編碼爲自己的響應，使用border-bottom而不是height和background-color。如前所述，IE8及以下版本的支持不存在。可以回退到這些瀏覽器的一個簡單的罷工。 http://jsfiddle.net/amustill/wEXWn/ – amustill

將你的刪除線價格包裹在<s>之後，然後使用JS在所有<s>標籤（顯然，關閉原生刪除線樣式）之上提升絕對定位的PNG。如果PNG有類似top: 0; right: 0; bottom: 0; left: 0;的東西，那麼它會相應地縮放，看起來不應該太糟糕。沒有JS的用戶在語義上會看到同樣的事情。

來源

2012-10-08 03:13:39

謝謝你的快速反應奔，非常感謝幫助 – user1752759

直通式/穿透式造型

回答

相關問題