Jump to content

How to create an arrow with background color


newcoder1010

Recommended Posts

Hello, 

I have this html:

<h3> Just complete this quick form </h3>

CSS:

 h3{ width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;}

 

It only put arrow right of the h3 tag. How can I have an arrow with background color like this image?

https://drive.google.com/open?id=0B7xIEuVi005yU2gxaTUwNHNNdVE

Thank you.

Link to comment
Share on other sites

You can do it by using pseudo-elements to generate the arrow:

h3 {
  position: relative;
  background-color: #00CC00;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  max-width: 200px; /* Set width, float left or do something else to stop it it from taking the full width of the page */
}
h3::after { /* This is a pseudo-element */
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 25px;
  border-color: transparent;
  border-left-color: #00CC00;
  position: absolute;
  top: 0;
  right: -25px;
}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...