Question

I’m working on a website where there is a services page with a few items priced accordingly.

As the site is a responsive layout and the text changes depending on the device it is being viewed on…I’m looking for a way to create the above example in HTML, CSS, JavaScript or something similar without resorting to using an image such as a jpg, png etc.

I’m finding it difficult to create this as there is a line-through on the angle like so, it’s a different color and controlling its thickness/weight..The best I can get is a thin line with its parent color, any suggestions?

Answer 1

It’s possible with css3 transforms, of course no IE support, but you can use a png as fallback for old browsers:

Demo: 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);
}