如何用箭头在div上添加边框？

Question

我有四个div样式，我需要使用：一个没有箭头，一个右箭头，一个左箭头，以及左右箭头。我希望带箭头的div有一个与没有箭头的div匹配的边框。这些div需要具有相同的高度和宽度，并且边框需要全部匹配。你会注意到，在我的代码中，我为箭头div指定了边框，并且它与背景颜色的颜色相同。我只有作为占位符，并使div的大小相同。我也知道箭头div上的边框将指定div的两边较暗的颜色和div的两边的背景颜色（我知道该怎么做）。

我真正的问题是如何在箭头部分完成边界？我正在寻找一个CSS ONLY解决方案。我已经看到添加另一个div，并使箭头1px（或任何宽度）更大的解决方案来模拟边框，但我希望避免额外的标记。我也意识到还有其他解决方案来制作箭头本身。我不反对另一个只有CSS的箭头解决方案，如果它有助于解决这个边界问题，或者更好的工作方式（我不想用JS来实现这一点，尽管我知道这是可能的）。我的CSS和样本HTML如下：

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

要添加围绕这似乎是一个额外的图像（支持透明度），使箭头上一个典型的箱的两侧，你需要一个边界创建另一个显示边框的图像，因为CSS不处理像三角形一样的形状来创建边框。这只适用于矩形。

Answer 2

您可以通过CSS后becore创建它....

下面的HTML代码...

<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> 

下面的CSS代码是...

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

您可以访问jsfiddle现场演示。

Answer 3

您可以使用pseudo-element和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