CODEWITHSUNDEEP
htmlcss
erics15
erics15

Reputation: 627

trying to create borders around CSS arrows. Is it possible?

i'm trying to figure out if there's a way to do a full outline around a navigation button that has 2 css triangles, left and right (the outline would include those triangles - that black border- it's all placeholder stuff - i know it looks crappy). Take a look at the fiddle.

https://jsfiddle.net/eshans/1hq04jbh/

<div class="border"></div>
    <div class="arrow">
        <div class="inner-arrow">
             <img src="http://www.phenotract.com/test/check.png" height="30" width="20" align="left">  <span> Text here Text Here</span>

</div>

just not sure if this is achievable without some hackery.

thank you.

Upvotes: 2

Views: 1184

Answers (2)

Marco Magrini
Marco Magrini

Reputation: 749

HTML

<div>
    <div class="arrow-box1"></div>
    <div class="arrow-box">
        <span>text here</span>
    </div>
</div>

CSS

.arrow-box, .arrow-box1 {
    float:left;
    position: relative;
    background: white;
    border: 3px solid green;
    border-right: 0 none;
    border-left: 0 none;
    height: 46px;
    width: 100px;
    padding: 10px;
    box-sizing: border-box;
}

.arrow-box1 {
    width: 30px;
}

.arrow-box1:after, .arrow-box1:before,
.arrow-box:after, .arrow-box:before {
    left: 0;
    top: 0;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow-box:after, .arrow-box:before {
    left: 100%;
    top: 0;
}

.arrow-box:after,
.arrow-box1:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: black;
    border-width: 20px;
}

.arrow-box1:after {
    border-left-color: #F3F5F6;
}

.arrow-box1:before,
.arrow-box:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: green;
    border-width: 23px;
    margin-top: -3px;
}

https://jsfiddle.net/1hq04jbh/5/

Edit: updated example with two triangles

Also check this out http://www.cssarrowplease.com/

Upvotes: 1

Henrik Nielsen
Henrik Nielsen

Reputation: 410

just not sure if this is achievable without some hackery.

You could argue that you're already a bit down hackery lane once you start having html elements only for the purpose of creating the arrow (<div class="inner-arrow">).

I guess a CSS black-belt could come up with a solution, but I would suggest using an SVG background-image to do this. It's a simple shape so you could even use it as a data-uri if you don't like the idea of having another http-request to fetch the SVG:

Upvotes: 0

Related Questions