3

私は、それに応じて価格設定されたいくつかのアイテムを含むサービスページがあるWebサイトに取り組んでいます.

価格

サイトはレスポンシブ レイアウトであり、表示されているデバイスに応じてテキストが変化するため、画像を使用せずに上記の例を HTML、CSS、JavaScript などで作成する方法を探しています。 jpg、pngなど。

角度にラインスルーがあるため、これを作成するのが難しいと感じています。これは別の色であり、その太さ/重さを制御しています..私が得ることができる最高のものは、親色の細い線です。 ?

4

2 に答える 2

4

css3 変換では可能ですが、もちろん IE はサポートされていませんが、古いブラウザーのフォールバックとして png を使用できます。

デモ: http://jsbin.com/ejoguw/1/edit

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-08T03:22:00.263 に答える