Trying to create a header with arrows and call to action

call to action examples
50 powerful call to action phrases
call-to-action generator
how to create a call to action button
call to action phrases examples
call to action in a sentence
call to action button design
call-to-action button html code

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:

  1. Title with button for a possible tooltip
  2. Description
  3. 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>

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>

17 Best Practices for Crazy-Effective Call-To-Action Buttons, In this post, we discuss 17 call-to-action button best practices to help you get a Header Top Primary Menu Instead of boring “Go,” why not try “Book An Event” ? The example below does a nice job of creating a sense of urgency. In some cases, small arrows or graphics on your CTA button can  1. Use action-oriented text. They’re called calls to action, so be sure to use striking, actionable text to draw readers in. Skip boring words like submit, enter, and even click here in favor of more compelling verbs like get, read, and try, then couple those with text relating to your specific offer.

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>

39 Call-to-Action Examples You Can't Help But Click, "Subscribe" CTAs are common to company blogs, for which the business wants to develop a readership. Try for free. Nearly every company  Your call-to-action email button should stand out. That means you should make a few design decisions that encourage subscribers to click. Here’s a list to consider: Create a button. You can still include hyperlinked text in your message, but don’t use this as the sole call to action. Create a call-to-action button. Using a button rather

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>

How to Create an Effective Call to Action Button (A Comprehensive , Did you know that just changing the color of the Call to Action (CTA) button can The header describes the benefit that the user wants to get, the subtitle offers From there, the arrows direct the user's view to the button. Facebook closed out 2014 with the announcement of a new call-to-action button for Facebook Pages. How it works. With the new feature, admins can choose from a selection of call-to-action buttons which will be added next to the “Like” button at the top of your Facebook Page.

Call to Action Buttons: Examples and Best Practices, How can we create effective call to action buttons that grab the user's attention We'll try to answer this question in this post by sharing some effective design of moving forward (indicated by the arrows pointing to the right). CrazyEgg's call-to-action: compelling, bold, irresistible Why this call to action works. This call to action hits several major marks. First, it establishes why trying out Crazy Egg is risk-free, using simple language that reinforces the safety of trying out their service. It lists several reasons why you’d want to do this, using simple verbs.

How to Create The Perfect Call-to-Action, Trying your customer's patience, such as with long hold times, comprises 35% of what consumers call bad customer service. image21. Satisfying your customers is  To create a call to action for your Facebook Page, go to your Page. We're working to update facebook.com and the Help Center. If you don't see instructions for the version you're using, learn how to switch versions or report a problem .

Click Here: 16 Hacks That'll Get Your Call-to-Action Buttons Clicked, And, without those clicks on your call-to-action buttons, you're not going to get For example, if you're an actor who wants to make a performance believable,  Call service endpoints over HTTP or HTTPS from Azure Logic Apps. 06/09/2020; 8 minutes to read +4; In this article. With Azure Logic Apps and the built-in HTTP trigger or action, you can create automated tasks and workflows that send requests to service endpoints over HTTP or HTTPS.

Comments
  • I know I shouldn't say "thanks" in this area...But Thank you! it was doing my head in. Legend!!
  • No problem! Just upvote the answer and mark it as accepted when you get the chance - from one Chris to another.