html - 将模拟底部边框应用于旋转的 div

Question

我目前正在使用 CSS3 rotate 值来为模态框提供箭头外观。我现在处于需要创建带有底部边框的完整箭头的情况。由于这只是一个旋转了 45° Angular 的 div，因此将另一个 border 应用于两侧的任何一侧都不能解决问题。

我的第一个想法是对 div 的 :after 伪选择器应用一些样式并使其垂直居中。由于某种原因，它继承了旋转值。我尝试将值设置为 none 并尝试手动调整旋转 Angular 但无济于事。关于如何使此边框水平重置有任何想法吗？

根据 Harry 的建议，我将 :after 选择器的 Angular 设置为 -45deg 并将 top 值设置为 50%。现在唯一的问题是它没有完全扩展到div的左右两侧。有什么想法吗？

.arrow {
  background-color: transparent;
  border-top: 2px solid #c7c7c7;
  border-left: 2px solid #c7c7c7;
  position: relative;
  height: 18px;
  width: 18px;

  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow:after {
  content: "";
  background: #c7c7c7;
  display: inline-block;
  position: absolute;
  top: 50%;
  height: 2px;
  width: 100%;
  
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

<div class="arrow"></div>

Answer 1

使用 CSS 转换:

您可以使用以下代码段中采用的方法创建带底部边框的完整箭头。在这里，箭头是由 :after 元素创建的，而底部的行是使用父容器创建的。旋转轴是固定的，使用相同的 transform-origin 父子。

使用这种方法创建的形状应该能够适应所有尺寸，而无需对定位进行任何调整(将箭头悬停在片段中以查看实际效果)。

.arrow {
  position: relative;
  height: 25px;
  width: 25px;
  border-bottom: 2px solid #c7c7c7;
}
.arrow:after {
  position: absolute;
  content: "";
  bottom: -1px;  /* half of border top */
  left: -2px;  /* equal to border left */
  height: calc(100% / 1.414); /* division by 1.414 because parent has to be larger */
  width: calc(100% / 1.414);
  border-top: 2px solid #c7c7c7;
  border-left: 2px solid #c7c7c7;
  transform-origin: left bottom;
  transform: rotate(45deg);
}

/* Just for demo */
.arrow { transition: all 1s; }
.arrow:hover { height: 50px; width: 50px; }

<div class="arrow"></div>

---

使用 SVG:

您还可以查看使用 SVG 创建此类形状，因为这样做更容易，而且输出也是响应式的。我们只需要一个 path 元素，它通过连接 d 属性中提供的坐标来创建形状。 M 命令将笔移动到指定的坐标，而 L 命令从前一点到命令后指定的点画线。

svg {
  width: 25px;
  height: 18px;
}
path {
  stroke: #c7c7c7;
  stroke-width: 2;
  fill: transparent;
}

/* Just for demo */
svg{ transition: all 1s; }
svg:hover{ width: 50px; height: 36px; }

<svg viewBox='0 0 50 50' preserveAspectRatio='none'>
  <path id='arrowhead' d='M0,48 L25,2 50,48z' vector-effect='non-scaling-stroke'/>
</svg>

---

使用渐变:

下面使用 linear-gradient 的方法也可以工作，并且只需要一个元素，但它对浏览器的支持较少，并且仅适用于固定大小的容器。由于渐变使用百分比值，底部边框会随着容器尺寸的变化而变粗(因此使其对响应式设计无用)。

.arrow {
  position: relative;
  height: 18px;
  width: 18px;
  border-top: 2px solid #c7c7c7;
  border-left: 2px solid #c7c7c7;
  background: linear-gradient(to left top, transparent 50%, #c7c7c7 50%, #c7c7c7 60%, transparent 60%);
  transform: rotate(45deg);
}

/* Just for demo */
.arrow { transition: all 1s; }
.arrow:hover { height: 50px; width: 50px; }

<div class="arrow"></div>