I was visiting the following site link
And I thought maybe that would be possible.
Here's what I've tried so far:
Elender is possible yes.
I used pseudo element ::after
and box-shadow
to do:
p > span {
background-color: peachpuff;
display: inline-block;
height: 1.25rem;
vertical-align: middle;
position: relative;
overflow: hidden;
}
p > span::after {
content: "";
width: 100%;
height: 1.25em;
background-color: peachpuff;
position: absolute;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
top: -120%;
left: 0;
box-shadow: 0 0.5em 0.5em 0 rgba(0,0,0,0.35);
}
<p>Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit. Atque pariatur, doloremque, ea labore voluptate provident quae eligendi <span>dolor aliquid corporis cupiditate magnam repudiandae, ut obcaecati.</span> Dolorum in inventore distinctio libero impedit veniam aperiam voluptatibus dolores? Voluptas labore at ullam sunt? Sed non aperiam molestiae numquam provident maxime illo dolorem earum?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque pariatur, doloremque, ea labore voluptate provident quae eligendi <span>dolor aliquid corporis cupiditate magnam repudiandae, ut obcaecati.</span> Dolorum in inventore distinctio libero impedit veniam aperiam voluptatibus dolores? Voluptas labore at ullam sunt? Sed non aperiam <span>molestiae numquam provident</span> maxime illo dolorem earum?</p>