Trying to create a header with arrows and call to action - html

Question

I'm nearly there after trawling various CSS sites and this one but would love some expert advice.
I'm trying to create a section header for a website that has 3 parts:
Title with button for a possible tooltip
Description
Call to Action button
Mockup attached.
I'm trying to adjust the arrow width so its not so "pointy" as it takes up additional space on the next area.
What I have so far is:
* {
box-sizing: border-box;
}
#RPheader {
float: left;
position: relative;
width: 40%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background: #004851;
}
#RPheader:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
}
#RPheader:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #004851;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
z-index: 1;
}
#RPdesc {
float: left;
position: relative;
width: 50%;
padding: 10px;
height: 40px;
color: #555555;
background-color: #F1ECEA;
}
#RPdesc:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
}
#RPdesc:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #F1ECEA;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#RPheaderButton {
float: left;
width: 10%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background-color: #00afd7;
}
<div id="RPheaderRow">
<div id="RPheader">Header title here</div>
<div id="RPdesc">This is where my description will go...</div>
<div id="RPheaderButton"> CTA </div>
</div>
I haven't done the tooltip part as yet...I will try and figure that out after this is done..yikes!
Any help much appreciated.
Chris.

Answer 1

You were almost there, just needed to adjust the border-left on the :before elements to a 10px value and then change the right property as well to -10px. I also updated the left and right padding on the RPDesc element and RPheaderButton element.
https://jsfiddle.net/disinfor/evy952bc/10/
* {
box-sizing: border-box;
}
#RPheader {
float: left;
position: relative;
width: 40%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background: #004851;
}
#RPheader:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
}
#RPheader:before {
content: "";
position: absolute;
right: -5px;
bottom: 0;
width: 0;
height: 0;
border-left: 5px solid #004851;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
z-index: 1;
}
#RPdesc {
float: left;
position: relative;
width: 50%;
padding: 10px 20px;
height: 40px;
color: #555555;
background-color: #F1ECEA;
}
#RPdesc:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
}
#RPdesc:before {
content: "";
position: absolute;
right: -10px;
bottom: 0;
width: 0;
height: 0;
border-left: 10px solid #F1ECEA;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#RPheaderButton {
float: left;
width: 10%;
padding: 10px 10px 10px 20px;
height: 40px;
color: #FFFFFF;
background-color: #00afd7;
}
<div id="RPheaderRow">
<div id="RPheader">Header title here</div>
<div id="RPdesc">This is where my description will go...</div>
<div id="RPheaderButton"> CTA </div>
</div>
You can adjust those two values as needed, but that will get you closer to what you want.

Answer 2

You can consider background to achieve this easily without the need of pseudo element:
* {
box-sizing: border-box;
}
#RPheader {
float: left;
width: 40%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background:
linear-gradient(to top right ,transparent 49.8%,#F1ECEA 50%) top right/20px 50%,
linear-gradient(to bottom right,transparent 49.8%,#F1ECEA 50%) bottom right/20px 50%,
#004851;
background-repeat:no-repeat;
}
#RPdesc {
float: left;
width: 50%;
padding: 10px;
height: 40px;
color: #555555;
background:
linear-gradient(to top right ,transparent 49.8%,#00afd7 50%) top right/20px 50%,
linear-gradient(to bottom right,transparent 49.8%,#00afd7 50%) bottom right/20px 50%,
#F1ECEA;
background-repeat:no-repeat;
}
#RPheaderButton {
float: left;
width: 10%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background-color: #00afd7;
}
<div id="RPheaderRow">
<div id="RPheader">Header title here</div>
<div id="RPdesc">This is where my description will go ...</div>
<div id="RPheaderButton"> CTA </div>
</div>
You can also optimize your code like below:
* {
box-sizing: border-box;
}
#RPheaderRow > div {
float: left;
padding: 10px;
height: 40px;
color:#fff;
background:
linear-gradient(to top right ,transparent 49.5%,var(--c,transparent) 50%) top right/var(--s,20px) 50%,
linear-gradient(to bottom right,transparent 49.5%,var(--c,transparent) 50%) bottom right/var(--s,20px) 50%;
background-repeat:no-repeat;
}
div#RPheader {
width: 40%;
--c:#F1ECEA; /*adjust the color*/
background-color:#004851;
}
div#RPdesc {
width: 50%;
color: #555555;
--c:#00afd7;
--s:10px; /*adjust the size of the arrow*/
background-color:#F1ECEA;
}
div#RPheaderButton {
width: 10%;
background-color: #00afd7;
}
<div id="RPheaderRow">
<div id="RPheader" >Header title here</div>
<div id="RPdesc" >This is where my description will go ...</div>
<div id="RPheaderButton" > CTA </div>
</div>

Answer 3

I would add a top arrow and a bottom arrow in the section before to simulate this arow you're trying to get.
* {
box-sizing: border-box;
}
#RPheader {
float: left;
position: relative;
width: 40%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background: #004851;
}
#RPheader:after {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-bottom: 20px solid #F1ECEA;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
#RPheader:before {
content: "";
position: absolute;
right: -20px;
top: 0;
width: 0;
height: 0;
border-top: 20px solid #F1ECEA;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
#RPdesc {
float: left;
position: relative;
width: 50%;
padding: 10px;
height: 40px;
color: #555555;
background-color: #F1ECEA;
}
#RPdesc:after {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-bottom: 20px solid #00afd7;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
#RPdesc:before {
content: "";
position: absolute;
right: -20px;
top: 0;
width: 0;
height: 0;
border-top: 20px solid #00afd7;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
#RPheaderButton {
float: left;
width: 10%;
padding: 10px;
height: 40px;
color: #FFFFFF;
background-color: #00afd7;
}
<div id="RPheaderRow">
<div id="RPheader">Header title here</div>
<div id="RPdesc">This is where my description will go...</div>
<div id="RPheaderButton"> CTA </div>
</div>