Clever Geek Handbook

Link with a triangle at the end of the window

I am in the process of creating a link that will have a css class. When this class is added, it adds a blue background behind it and adds a triangle to the end of the background width. The problem is I can figure out why it doesn't fit correctly. I tried floats and various display settings.

My question is how can I make a link have a background and then add a triangle at the end of the background of the link. Also if you have any other guesses on how I am doing this, that would be appreciated too.

I have installed a jsfiddle with my working example. http://jsfiddle.net/L35basmc/

HTML:

<a href="features.php" class="sidebar-linebreak-active"><i class="fa fa-trophy fa-lg"></i> Feature Highlights</a><div class="sidebar-linebreak-active-arrow"></div>
<a href="create-your-store.php" class="sidebar-linebreak"><i class="fa fa-building fa-lg"></i> Create your store</a>
<a href="configure-your-products.php" class="sidebar-linebreak"><i class="fa fa-money fa-lg"></i> Configure your products</a>
<a href="manage-your-store.php" class="sidebar-linebreak"><i class="fa fa-fax fa-lg"></i> Manage your store</a>
<a href="rank-high-in-search.php" class="sidebar-linebreak"><i class="fa fa-rocket fa-lg"></i> Rank high in search</a>
<a href="marketing.php" class="sidebar-linebreak"><i class="fa fa-users fa-lg"></i> Marketing</a>
<a href="conversion-tools.php" class="sidebar-linebreak"><i class="fa fa-cogs fa-lg"></i> Conversion tools</a>
<a href="hosting-and-security.php" class="sidebar-linebreak"><i class="fa fa-cloud fa-lg"></i> Hosting & security</a>
<a href="analytics.php" class="sidebar-linebreak"><i class="fa fa-database fa-lg"></i> Analytics</a>
<a href="apps-and-integration.php" class="sidebar-linebreak"><i class="fa fa-laptop fa-lg"></i> Apps & integrations</a>
<a href="expert-support.php" class="sidebar-linebreak"><i class="fa fa-umbrella fa-lg"></i> Expert support</a>

CSS

.sidebar-linebreak {
    font-family: 'Raleway', sans-serif;
    display: block;
    color: #53c6f3;
    font-size: 18px;
    margin-bottom: 5px;
    padding: .4em .8em;
    border-radius: 8px;
    width: 100%;
}

.sidebar-linebreak:hover {
    color: #1a9ec6;
}

.sidebar-linebreak-active, sidebar-linebreak-active:hover {
    float: left;
    font-family: 'Raleway', sans-serif;
    display: inline-block;
    font-size: 18px;
    margin-bottom: 5px;
    padding: .4em .8em;
    border-radius: 8px 0 0 8px;
    width: 100%;
    color: #FFFFFF !important;
    background-color: #1a9ec6;
}

.sidebar-linebreak-active-arrow {
    display: inline-block;
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #1a9ec6;
}

.sidebar-linebreak-active-arrow:after {
    clear: both;
}
+3


source to share


3 answers


The problem is that you are adding a background width: 100% and then adding an arrow for why the arrow falls.

Set a smaller width for the background, say 90% -



.sidebar-linebreak-active, sidebar-linebreak-active:hover {
    float: left;
    font-family: 'Raleway', sans-serif;
    display: inline-block;
    font-size: 18px;
    margin-bottom: 5px;
    padding: .4em .8em;
    border-radius: 8px 0 0 8px;
    width: 90%; /* <-- */
    color: #FFFFFF !important;
    background-color: #1a9ec6;
}

FIDDLE

+2


source


Absolute positioning is your friend here. Add position:relative;

to your link and use :after

by link to create an arrow. Then you can reset the empty div and you don't have to mess with floats.

.sidebar-linebreak {
    font-family: 'Raleway', sans-serif;
    display: block;
    color: #53c6f3;
    font-size: 18px;
    margin-bottom: 5px;
    padding: .4em .8em;
    border-radius: 8px;
    width: 100%;
}

.sidebar-linebreak:hover {
    color: #1a9ec6;
}

.sidebar-linebreak-active, sidebar-linebreak-active:hover {
    font-family: 'Raleway', sans-serif;
    display: inline-block;
    font-size: 18px;
    margin-bottom: 5px;
    padding: .4em .8em;
    border-radius: 8px 0 0 8px;
    width: 100%;
    color: #FFFFFF !important;
    background-color: #1a9ec6;
    position: relative;
}

.sidebar-linebreak-active:after{
    content:"";
    display: inline-block;
    width: 0; 
    height: 0; 
    border-top: 20px solid #fff;
    border-bottom: 20px solid #fff;
    border-left: 20px solid #1a9ec6;
    position: absolute;
    top:-2px;
    right: 0;
}


http://jsfiddle.net/L35basmc/17/

You may need to adjust the width of the borders and the position of the arrow to your liking.

0


source


in your sidebar class, you can get the results you want in one step. You can add a left lining and add an image to the background in front of the color, this will be along the lines

.sidebar-linebreak{
 //Your other code
    display:block;
    padding-left:15px;
    background:url("ImageLocation/triangleImage.png") #1a9ec6 no-repeat;
    background-size:15px;
    background-position:left;

}

If you want it on the right side, just add a padding to the right and position the image to the right, not the left

0


source






More articles:


All Articles