Question 250326 in Html Question posted in
Some basic documentation can be found here.

How do i create a background for a heading tag in html/css like this?

image, click here.

Trying to create a background for a heading tag like the image above. Anyone know how?

Tried using clip path, and svg path but didn’t get it right. Would appreciate if anyone could shed some light on this. Thanks!

/* First try*/
.splash {
  background-color: #f5e2d1;
  clip-path: ellipse(75% 23% at 53% 30%);
  padding: 10px;
}


/* Second try, didn't quite understand this one and tried playing with the numbers but didn't get the shape i want */
.splash {
  background-color: #f5e2d1;
  clip-path: path('M50 0 C20 20, 20 70, 50 50, 80 70, 80 20, 50 0 Z');
  padding: 10px;
}
<div class="splash">
  <h3 lass="clipped">Education</h3>
</div>
Tags:

2

Answers


  1. 0

    Will this meet your needs

    .fancy-text {
  background: linear-gradient(45deg, #ff9800, #e91e63);
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
  border-radius: 40%;
  width: 15%;
  height: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
    <div class="fancy-text">
  Raky
</div>

    You can play with these

     width: 15%;
  height: 10px;
  display: flex;

    to shape as you like it better

    Login or Signup to reply.
  2. 0

    @CheepSheep, Looking at what you attempted, Heres something more for you…

    const splash = document.querySelector('.splash');
const fancyText = document.querySelector('.fancy-text');


function resizeSplash() {
  const textWidth = fancyText.offsetWidth;
  splash.style.width = textWidth + 'px';
}


resizeSplash();
window.addEventListener('resize', resizeSplash);
    .splash {
  position: relative;
  display: inline-block;
  background-color: #f5e2d1;
  text-align: center;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  padding: 10px;
}

.clipped {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 10px;
}

.fancy-text {
  background: linear-gradient(45deg, #ff9800, #e91e63);
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
  border-radius: 40px;
  display: inline-block;
}
    <div class="splash">
  <h3 class="clipped">
    <p class="fancy-text">Raky's Education </p>
  </h3>
</div>

<div class="splash">
  <h3 class="clipped fancy-text">Raky's Education</h3>
</div>
<br><br>
<div class="splash">
  <h3 class="clipped">
    <p class="fancy-text">Raky's Education </p>
  </h3>
</div>
<br> <br>
<div class="splash">
  <h3 class="clipped fancy-text">Raky's Education</h3>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search