Style left side of border-bottom with square / diamond shape

Question

I am attempting to create a creative bottom border for a header of mine, but am struggling. Here's what I have so far.

div {
  margin: 30px
}

h3.stat-page-section-header { 
  font-size: 40px;
  color: #000099;
  vertical-align: left;

  text-transform: uppercase;
  margin: 0px 0px 0px 45px;
}

hr.hr-style-2 {
  font-family: Arial, sans-serif; /* choose the font you like */
  // text-align: center; /* horizontal centering */
  line-height: 1px; /* vertical centering */
  height: 1px; /* gap between the lines */
  font-size: 1em; /* choose font size you like */
  border-bottom: 3px solid #000099;
  border-top: none;
  margin: 0px 10px 20px 10px; /* 20px space above/below, 10px left/right */
  overflow: visible;

  /* ensure 1px gap between borders */
  box-sizing: content-box;
}

hr.hr-style-2::after {
  content: "♦"; /* section sign */
  color: red;
  font-size: 40px;
  display: inline; /* for vertical centering and background knockout */
  padding: 0 0.5em; /* size of background color knockout */
}

<div>
  <h3 class='stat-page-section-header'>My Header Here</h3>
  <hr class='hr-style-2' />
</div>

However, within the app I am building, this current approach of mine is not great, mainly because I am using a separate <h3> and <hr> here, whereas it would be much better if this was done as a border-bottom style on the <h3>.

Also, stylistically, I would prefer it if the diamond appeared first, followed by a small 3-6px gap, followed by the border-bottom, with the vertical centering such that the border-bottom is centered on the diamond. I would also prefer to remove the 45px left-margin on the h3.

Any help with this would be greatly appreciated!

Answer 1

Is this what you are looking for?

• Using a bottom border
• small gap between diamond and border
• Diamond inline
• removing left margin

You need to add the border in :after and then define its dimensions/margins appropriately

div {
  margin: 30px
}

h3.stat-page-section-header {
  display: inline-block;
  position: relative;
  font-size: 40px;
  color: #000099;
  vertical-align: left;
  text-transform: uppercase;
  margin: 0px 0px 0px 0px;
}

h3.stat-page-section-header:after {
  position: absolute;
  content: '';
  border-bottom: 3px solid #000099;
  width: 93%;
  transform: translateX(-47%);
  bottom: -15px;
  left: 50%;
}

div.hr-style-2 {
  font-family: Arial, sans-serif;
  /* choose the font you like */
  float: left;
  line-height: 1px;
  /* vertical centering */
  height: 1px;
  /* gap between the lines */
  font-size: 1em;
  /* choose font size you like */
  border-top: none;
  margin: 57px -20px 20px 0px;
  overflow: visible;
  /* ensure 1px gap between borders */
  box-sizing: content-box;
}

div.hr-style-2::before {
  content: "♦";
  /* section sign */
  color: red;
  font-size: 40px;
  display: inline;
  /* for vertical centering and background knockout */
}

<div>
  <h3 class='stat-page-section-header'>My Header Here</h3>
  <div class='hr-style-2' />
</div>

Note: this does not work well on smaller viewports.

Answer 2

Here is an idea with only background that you can apply on the h3 without extra element:

h3 { 
  font-size: 40px;
  color: #000099;
  text-transform: uppercase;
  padding: 0px 0px 20px 45px;
  background:
  
    /*Losange created by 4 triangles*/
    linear-gradient(to top right,transparent 49%,red 50%) left 30px bottom 0px/10px 15px,
    linear-gradient(to top left,transparent 49%,red 50%)  left 40px bottom 0px/10px 15px,
    linear-gradient(to bottom right,transparent 49%,red 50%) left 30px bottom 15px/10px 15px,
    linear-gradient(to bottom left,transparent 49%,red 50%)  left 40px bottom 15px/10px 15px,
  
    /*bottom border*/
    linear-gradient(currentColor,currentColor) left 60px bottom 13px/100% 3px;
  background-repeat:no-repeat;
}

<h3>Some text here</h3>

Adding CSS variable to better control size and position:

h3 { 
  --dh:15px; /*height of the diamond*/
  --dw:10px; /*width of the diamond*/
  --dp:30px; /*position of the diamond*/
  --b:3px; /*border bottom*/
  font-size: 40px;
  color: #000099;
  text-transform: uppercase;
  padding: 0px 0px calc(2*var(--dh)) 45px;
  margin:20px 0;
  background:
  
    /*Losange created by 4 triangles*/
    linear-gradient(to top right,transparent 49%,red 50%) left var(--dp) bottom 0px/var(--dw) var(--dh),
    linear-gradient(to top left,transparent 49%,red 50%)  left calc(var(--dp) + var(--dw)) bottom 0px/var(--dw) var(--dh),
    linear-gradient(to bottom right,transparent 49%,red 50%) left var(--dp) bottom var(--dh)/var(--dw) var(--dh),
    linear-gradient(to bottom left,transparent 49%,red 50%)  left calc(var(--dp) + var(--dw)) bottom var(--dh)/var(--dw) var(--dh),
  
    /*bottom border*/
    linear-gradient(currentColor,currentColor) left calc(var(--dp) + 2*var(--dw) + 6px) bottom calc(var(--dh) - var(--b)/2)/100% var(--b);
  background-repeat:no-repeat;
}

<h3>Some text here</h3>

<h3 style="--dh:20px;--dw:15px;--dp:70px;--b:4px"

>Some text here</h3>