2

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.

erics15
  • 567
  • 1
  • 7
  • 16
  • Is [this](https://jsfiddle.net/1hq04jbh/1/) what you are looking for ? – Antonio Smoljan Dec 18 '15 at 22:04
  • @AntonioSmoljan I think he is looking for it to fit the outsides of the arrow perfectly, I am going to tinker with this a bit and see if I can find out. – Slacks. Dec 18 '15 at 22:15
  • Possible duplicate of http://stackoverflow.com/questions/27636373/how-to-make-this-arrow-in-css-only/28196665#28196665 – Harry Dec 19 '15 at 02:39

2 Answers2

1

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/

Marco Magrini
  • 749
  • 1
  • 9
  • 19
0

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:

Community
  • 1
  • 1
Henrik Nielsen
  • 410
  • 2
  • 6