Use CSS to make an arrow instead of rounding corners

css, html

Solution

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

Problem

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; } ```

Original source