如何在带箭头的div周围添加边框？ [英] How do I add a border around a div with arrows?

问题描述

我有四个div样式，我需要使用：一个没有箭头，一个右箭头，一个左箭头，和左右箭头。我想要arrowed divs有一个边框包围他们匹配的div没有箭头。这些div需要是相同的确切的高度和宽度和边框需要所有匹配。你会注意到，在我的代码中，我为箭头divs指定一个边框，它的颜色与背景颜色相同。我只有这作为一个占位符，并使div的大小相同。我还知道箭头div的边框将指定在div的2-3侧的深色和div的1-2侧的背景颜色（我知道如何做）。

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

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

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>

推荐答案

您可以使用伪元素和变换来实现。

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

FIDDLE

这篇关于如何在带箭头的div周围添加边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！