How do I add a highlight behind the text via CSS so it looks like Instagram-one below?

Question

I'm quite new to CSS\HTML. How do I do the same way via CSS:

I've tried this:

.works_title {
  display: inline;
  padding: 3px;
  font-size: 28px;
  font-weight: 700;
  color: aliceblue;
  background-color: #000;
  border-radius: 4px;
}


body {
 max-width:300px;
}

<div class="works_title">Something long, like a title with bunch of letters</div>

But it doesn't look the way how it possibly could be like in an Instagram story editor. I need something like this in a web. Thanks!

Answer 1

You can use box-decoration-break: clone; then consider an SVG filter to make the effect better.

Update the stdDeviation variable to controle the shape:

.works_title {
  display: inline;
  padding: 4px 6px;
  line-height:1.4; /* adjust this to avoid overlapping the padding */
  font-size: 28px;
  font-weight: 700;
  color: aliceblue;
  background-color: red;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  filter: url('#instagram');
}
.no-filter {
  filter:none;
}

body {
  max-width: 250px;
}

<div class="works_title">Something longlike a title with bunchofletters a more text</div>
<br>
<br>
<div class="works_title no-filter">Something longlike a title with bunchofletters a more text</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="instagram">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

Answer 2

You can use after and before pseudo elements.

First of all our boxes will have position:relative and our pseudo elements need to have position:absolute

I create a circle and make it tangent to borders with ::after

Than i create another square and put it into corner which have lower z-index and have overflow:hidden

z-index is important here because when we set background color of circle to body color(which is white here), circle will disappear and the only thing left is ::before element which seems to have inverse border radius

*,
*::before,
*::after {
  box-sizing: border-box;
}


.tittle-font {
  position: relative;
  font-size: calc(34px + (36 + 36 * 0.7) * ((100vw - 320px) / 1920));
  line-height: calc(46px + (65 + 65 * 0.7) * ((100vw - 320px) / 1920));
  font-weight: 300;
  background-color: #fff500;
  display: inline-block;
  padding-left: 30px;
  padding-right: 30px;
}

.box-1{
  
  border-top-left-radius:1rem ;
  border-top-right-radius: 1rem;
}
.box-2{
  border-top-right-radius: 1rem;
}

.box-3{
  border-top-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.box-1::after{
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  background-color: white;
  z-index:5;
  right: -2rem;
  bottom:0rem;
  border-radius: 100%;
}

.box-1::before{
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: #fff500;
  z-index:4;
  right: -1rem;
  bottom:0rem;
  overflow: hidden;
}

.box-2::after{
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  background-color: white;
  z-index:5;
  right: -2rem;
  bottom:0rem;
  border-radius: 100%;
}

.box-2::before{
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background-color: #fff500;
  z-index:4;
  right: -1rem;
  bottom:0rem;
  overflow: hidden;
}

 <div>
      <div class="tittle-font pt-4 box-1 rounded-t-xl">SOFTWARE</div>
      <br />
      <div class="tittle-font rounded-tr-xl box-2">DEVELOPMENT</div>
      <br />
      <div class="tittle-font pb-4 rounded-b-xl rounded-tr-xl box-3">
        AND CONSULTING
      </div>
</div>