Question

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

我真正的问题是如何在箭头部分完成边界？我正在寻找一个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

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

Answer 2

您可以在css ....之前创建它。

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

要在看似附加图像（支持透明度）周围添加边框以使箭头位于典型框的两侧，您需要创建另一个显示边框的图像，因为CSS不处理像三角形这样的形状创造边界。这仅适用于矩形。

如何使用箭头在div周围添加边框？

3 个答案: