如何用箭頭在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