CODEWITHSUNDEEP
htmlcss
Pierce McGeough
Pierce McGeough

Reputation: 3086

Use CSS to make an arrow instead of rounding corners

I have a link which is a box like the SO 'Ask Question' button but I want the right of it to point like an arrow.

This http://jsfiddle.net/U4zXS/1/ is what I have so far. I have the right side rounded but I need it to be in a point like an arrow.

<a class="arrow_link" href="{$base_url}signup">GET STARTED WITH OUR <span class="purple">FREE TRIAL</span></a>


.arrow_link{
    float: left;
    background-color: $color-orange;
    border-radius: 0 25px 25px 0;
    padding: 4px 15px 6px 8px;
    margin-top: -5px;
    font-weight: bold;
    color: $color-white;
}
a{
    text-decoration: none;
}

Upvotes: 3

Views: 6142

Answers (4)

Gandalf
Gandalf

Reputation: 13683

Have a look at this http://jsfiddle.net/WW32n/1/ and some references here http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

<p class="triangle-isosceles right">The entire appearance is created only with CSS.</p>

and the css

.triangle-isosceles {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  color:#000;
  background:#f3961c; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
  background:-moz-linear-gradient(#f9d835, #f3961c);
  background:-o-linear-gradient(#f9d835, #f3961c);
  background:linear-gradient(#f9d835, #f3961c);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

/* creates triangle */
.triangle-isosceles:after {
  content:"";
  position:absolute;
  bottom:-15px; /* value = - border-top-width - border-bottom-width */
  left:50px; /* controls horizontal position */
  border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#f3961c transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

Upvotes: 0

matewka
matewka

Reputation: 10148

You can try with the borders triangle method:

.arrow_link::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    border-style: solid;
    border-color: transparent #F78E1E;
    border-width: 15px 0 15px 15px;
    width: 0;
    height: 0;
}

Notice that you'll also have to add position: relative to the .arrow_link itself.

Here's the updated fiddle: FIDDLE

Upvotes: 4

Josh Powell
Josh Powell

Reputation: 6297

You can use a pseudo element to make the triangle at the end of the element. Here is some more info about pseudo elements that should help you get started with them.

Here is the changed css:

.arrow_link{
    float: left;
    background-color: $color-orange;
    padding: 4px 15px 6px 8px;
    margin-top: -5px;
    font-weight: bold;
    color: $color-white;
    position: relative;
}
.arrow_link:after {
    content: "";
    display: block;
    position: absolute;
    border-left: 15px solid #f78e1e;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    left: 100%;
    top: 0;
}

Finally, a fiddle: Demo

The only problem you will have is due to your element not having a fixed height, won't be a problem if your element doesn't change. CSS triangles are not the most flexible thing to use but they do the trick.

Upvotes: 0

Cas Cornelissen
Cas Cornelissen

Reputation: 617

You can use the CSS :after psuedo-element as followed:

.arrow_link { position: relative; }
.arrow_link:after {
   content: '';
   display: block;
   border: 10px solid transparent;
   border-left-color: red;
   top: 0;
   right: -20px;
}

This will append a psuedo-element to your a, which will show the arrow using the border trick as explained very well on CSS Tricks.

Upvotes: 1

Related Questions