Pen highlighter effect in css

Question

I want to create a highlight effect that resembles a highlight made with a pen. i.e. it has wavy tops and bottoms and a rough start and end, like in this picture.

What's the best way to do this in CSS? Is there a way to do it without using background images? Also so that it works will line wraps.

Ideally the solution would take HTML like the below and make it look like the image.

<p>
  <span class='green-highlight>So write with a combination of short, medium, and long sentences. Create a sound that pleases the reader's ear. </span>
  <span class='pink-highlight'>Don't just write words. </span>
  <span class='yellow-highlight'>Write music. </span
</p>

Answer 1

Using CSS only, the closest you can get to your screenshot is something like this :

.green-highlight, .pink-highlight, .yellow-highlight {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding-left: 3px;
 }

.green-highlight {
    background: #99FFCC; /* Default color, all browsers */
}

.green-highlight::selection {
    background: #99CCCC; /* Selection color, WebKit/Blink Browsers */
}

.green-highlight::-moz-selection {
    background: #99CCCC; /* Selection color, Gecko Browsers */
}

.pink-highlight {
    background: #FFCCFF; /* Default color, all browsers */
}

.pink-highlight::selection {
    background: #FF99FF; /* Selection color, WebKit/Blink Browsers */
}

.pink-highlight::-moz-selection {
    background: #FF99FF; /* Selection color, Gecko Browsers */
}

.yellow-highlight {
    background: #FFFFCC; /* Default color, all browsers */
}

.yellow-highlight::selection {
    background: #FFFF66; /* Selection color, WebKit/Blink Browsers */
}

.yellow-highlight::-moz-selection {
    background: #FFFF66; /* Selection color, Gecko Browsers */
}

<p>
  <span class='green-highlight'>
      So write with a combination of short, medium,
      and long sentences. Create a sound that pleases
      the reader's ear.
  </span>
  <span class='pink-highlight'>
      Don't just write words.
  </span>
  <span class='yellow-highlight'>
       Write music.
  </span>
</p>

If that's not close enough, I'm afraid you have to use images.