Heading with linear-gradient and border-radius alignment difficulty

HTML & CSS
1

It isn’t something I have to have, but I’ve been trying.

I have a page with h2 elements with div next siblings

What I would like to have, at least to see how it looks, is the linear-gradient sticking out a bit, and the border-radius bottom right corner ending at the div top right corner.

This is what I have right now, and if it is possible to do the alignment I’d like to remove the space between the h2 and div.

This is the relevant CSS

h2 { 
  margin: 1em auto 0;
  padding-left: 1em;
  border-top-right-radius: 1em;
  background: linear-gradient(to right, #323272, white 16px, white);
  max-width: 79.5%;
  color: #101060;
}
div, p {
  max-width: 80%;
  margin: 0 auto;
}

The simple HTML is like

<h2>Set-Up</h2>
<div class="info setup"
2

Hi Mittineague,

Are you wanting something like this…

I just used a <p> tag for the demo but it looks like you will be having an ordered list for the numbered items.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
body {
   background: #ccc
}
.wrap {
   margin: 0 auto;
   padding-left: 16px;
   max-width: 80%;
   box-sizing: border-box;
}
h2 {
   margin: 0 0 0 -16px;
   padding: .25em 1em;
   border-top-right-radius: 1em;
   background: linear-gradient(to right, #323272, white 16px, white);
   color: #101060;
}
h3, p {
   margin: 0;
   padding: .25em .5em;
   background: #fff;
}
</style>

</head>
<body>

<div class="wrap">
   <h2>Set-Up</h2>
   <div class="info setup">
      <h3>Requirements:</h3>
      <p>1. A PHP 7 capable localhost environment.</p>
   </div>
</div>

</body>
</html>
2 Likes
3

Thanks,

There are several divs and there are different children, p, ul, ol, dl.

I had thought to wrap the children with a div, but for some reason hadn’t thought to include the h2s and divs in another div. The closest I could get was by using magic numbers, which of course lost their magic at a mere wave of the wand.

1 Like
4

Yeah, I had tried making it work with the html you posted (without the wrapping div).

The gradient offset (created by the h2 79.5% width + padding) became smaller and smaller when the viewport was reduced, to the point where it was barely noticeable at the smallest width.

Then there were also rounding errors where the round corner on the h2 was trying to line up with the div.

The wrapping div allows you to set a width one time, then the block children fill that space on their own.

5

My problem was I was “stuck” on styling the h2. Pseudo ::before doesn’t do linear-gradient. Different box-sizing values didn’t work. Trying different radii with ellipse didn’t work for lining up the border-radius. I was sure there must be a way that I just wasn’t thinking of. Negative margin “worked” but lost the auto which meant needing magic numbers. I was so focused on hammering that one nail I didn’t think to add another board to the crate :wink:

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.