Как изменить форму текста, выделенного с помощью CSS

Question

Я хочу выделить часть текста, как показано на рисунке ниже, я попытался использовать background-color, который не дал мне очень полезных результатов. Кроме того, этот же стиль используется в разных местах, поэтому нельзя использовать SVG, так как это приведет к нескольким SVG. Текст должен быть всегда выделен, я не говорю об изменении текста, когда он выбран

Это код, который я уже пробовал (этот код выделяет текст, но не так, как я хочу). Проблема в том, как выделить текст в нужной форме?

span {
  background-color: yellow;
}

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

Answer 1

вы можете использовать тег CSS :: selection для изменения свойств выделенного текста, но можно изменить только несколько свойств, а именно: цвет, фон, курсор и контур.

::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 2

Вы можете установить цвет фона и тень, но чтобы получить определенную форму, вам придется создать ее вручную, возможно, с помощью 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>