How do I add a border around a div with arrows? [d

Question

This question already has an answer here:

• CSS: Make border on pure-CSS arrow 5 answers

I have four div styles that I need to use: one with no arrows, a right arrow, a left arrow, and both right and left arrows. I want the arrowed divs to have a border surrounding them that matches the div with no arrows. These divs need to be the same exact height and width and the borders need to all match. You'll notice in my code I DO specify a border for the arrowed divs and it's the same color as the background color. I only have that as a placeholder and to make the sizes of the divs the same. I also know that the border on the arrowed divs will specify the darker color on 2-3 sides of the div and the background color on 1-2 sides of the div (and I do know how to do that).

My real question is how do I accomplish that border on just the arrow part? I'm looking for a CSS ONLY solution. I've seen solutions of adding another div and making the arrow 1px (or whatever width) larger to simulate a border but I was hoping to avoid the extra markup. I also realize there are other solutions to making the arrow itself. I'm not opposed to another arrow solution that is CSS ONLY if it helps with this border issue, or even one that works better (I didn't want to use JS to accomplish this, though I know it's possible). My CSS and sample HTML follows:

div.occurrence-wrapper {
  position: relative;
  margin: 0.1em 0.2em;
}
div.full {
  border: 0.1em solid #88b7d5;
  background-color: #c2e1f5;
  position: relative;
  height: 1.4em;
  overflow: hidden;
}
div.flow-prev > div.full,
div.flow-next > div.full {
  border-color: #c2e1f5;
}
div.flow-prev > div.full {
  margin-left: 0.7em;
}
div.flow-next > div.full {
  margin-right: 0.7em;
}
div.flow-prev:before,
div.flow-next:after {
  content: "";
  height: 0;
  width: 0;
  padding: 0;
  margin: 0;
  top: 50%;
  border: solid transparent;
  border-color: rgba(136, 183, 213, 0);
  position: absolute;
  pointer-events: none;
  border-width: 0.7em;
  margin-top: -0.7em;
}
div.flow-prev:before {
  right: 100%;
  border-right-color: #c2e1f5;
  margin-right: -0.7em;
}
div.flow-next:after {
  left: 100%;
  border-left-color: #c2e1f5;
  margin-left: -0.7em;
}

<table>
  <tbody>
    <tr>
      <td>
        <div class="occurrence-wrapper">
          <div class="full">No arrows</div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="occurrence-wrapper flow-prev flow-next">
          <div class="full">Both arrows</div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="occurrence-wrapper flow-prev">
          <div class="full">Left arrow</div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="occurrence-wrapper flow-next">
          <div class="full">Right arrow</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

You can achieve that using a pseudo-element and transform.

div {
    position: relative;
    width: 150px;
    height: 40px;
    background: crimson;
    border: 2px solid navy;
}
div:before {
    content: "";
    position: absolute;
    height: 29px;
    width: 29px;
    transform-origin: 0% 0%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    right: -33px;
    top: -2px;
    background: crimson;
    border-top: 2px solid navy;
    border-right: 2px solid navy;
}

<div></div>

FIDDLE

Answer 2

To add a border around what appears to be an additional image (supporting transparency) to make the arrow on either side of a typical box, you need to create another image showing the border, because CSS does not handle shapes like triangles to create borders over. This only works on rectangles.

Answer 3

You can create it by becore after css....

below the HTML code is...

<div class="myDiv">This Is My Div</div>
<div class="myDiv right">This Is My Div</div>
<div class="myDiv left">This Is My Div</div>
<div class="myDiv left right">This Is My Div</div>

below the css code is...

.myDiv{
    padding:5px 10px;
    background:#333;
    color:#FFF;
    width:120px;
    position:relative;
    height:30px;
    margin-bottom:20px;
}
.myDiv.left{
    margin-left:20px;
}
.myDiv.left:before{
    content:" ";
    width:0px;
    background:transparent;
    height:0;
    position:absolute;
    top:0; 
    left:-40px;
    border-right: 20px solid #333;
    border-top: 20px solid transparent;
    border-left: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
}

.myDiv.right:after{
    content:" ";
    width:0px;
    background:transparent;
    height:0;
    position:absolute;
    top:0;
    right:-40px; 
    border-left: 20px solid #333;
    border-top: 20px solid transparent;
    border-right: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
}

You can visit the jsfiddle live demo.