newcoder1010 Posted April 7, 2017 Share Posted April 7, 2017 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 More sharing options...
Ingolme Posted April 7, 2017 Share Posted April 7, 2017 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now