How to change the shape of text highlighted using CSS

Question

I want to highlight a part of a text as shown in the image below, I have tried using background-color which didn't give me very useful results. Also, this same styling is used in different places so can't use SVG, as it will lead to multiple SVGs. The text is supposed to be always highlighted, I'm not talking about modifying text when its selected

This is the code I have already tried (this code highlights the text but not in the way I want it). The problem is how to highlight the text in the shape I want it to be ?

span {
  background-color: yellow;
}

<div>
some text <span>highlighted</span>
</div>

Answer 1

I am answering my own question here.

I generated highlighted SVG and used as background image

Answer 2

you can use the CSS ::selection tag to change properties of the selected text, but only a few properties can be changed, namely: color, background, cursor, and outline.

::selection {
  color: red; 
  background: yellow;
}

<h1>Select some text :</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores illo porro! Voluptas facilis quos atque quod maxime adipisci deserunt alias, enim id est necessitatibus laboriosam in mollitia voluptatem illum?
In, dicta? Ipsam atque officiis repellendus. Eos, nemo? Vitae dignissimos, sapiente, sint natus velit cumque expedita optio rerum neque nam, omnis reiciendis explicabo ratione qui unde ipsa esse. Aut, minima?
Doloremque molestiae dolore quo ratione sed debitis consectetur officiis, voluptate quae voluptates enim earum maxime fuga commodi odit. Enim delectus officia impedit unde aperiam minus cupiditate, veniam expedita quaerat molestias?
Recusandae magni laboriosam similique perspiciatis praesentium labore, culpa nostrum eius dolores possimus dignissimos ducimus illo aliquam commodi rerum pariatur, itaque incidunt repudiandae. Architecto dolore necessitatibus harum perferendis veritatis neque similique!
Harum nobis commodi dolor reprehenderit sunt dolorum officia ipsum in voluptatem, quae laborum molestiae natus quia. Quos, consectetur fugit quo temporibus dolores nostrum odio aperiam debitis quas dicta quaerat impedit.
Totam excepturi fuga deserunt! Nam asperiores debitis, omnis, molestias, accusantium labore dolorum facere cum obcaecati ullam at nobis explicabo tempore. Enim eum beatae pariatur omnis neque saepe fuga? Nam, dolorem?
Quos quo laborum, labore aut maxime doloribus doloremque repellendus similique, suscipit provident aperiam odit excepturi repudiandae perspiciatis ipsam eligendi, tenetur cumque? Quae libero vel eum harum quam! Debitis, aliquam numquam.
Totam, eum assumenda minus officia, repellendus sint libero quo voluptatibus autem quam dolorem aperiam beatae! Delectus quis tempore facilis non odio accusamus, eos ducimus deserunt voluptatibus veritatis dolorem quidem sequi.
Reiciendis itaque exercitationem assumenda neque cum quod aliquam quaerat deleniti ipsum culpa, temporibus eaque facere quia molestiae perspiciatis quae consectetur enim officiis error ut. Veritatis voluptatibus molestias illo repellat sit.
Tempore nulla itaque culpa iusto eos ducimus quam quia repudiandae, perspiciatis laudantium sapiente inventore nostrum doloremque delectus similique, dolorem blanditiis velit possimus labore quidem consequuntur dolores temporibus sit eius! Quo.</p>

Answer 3

You can set a background color and a shadow, but to achieve a specific shape you'll have to create it manually, probably with SVG.

div{
  padding: 4px;
}
span {
  background-color: #E7C246;
  border-radius: 4px;
  box-shadow: 3px 5px 5px -5px rgba(0,0,0,0.75);
  padding: 5px;
}

<div>
  Some text and <span>some highlighted text<span>
</div>