将模拟底边框应用于旋转 div

Question

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

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

根据 Harry 的建议，我将 :after 选择器的角度设置为 -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 元素创建的，而底部的线条是使用 parent 容器创建的。 parent & child.

使用相同的 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>

将模拟底边框应用于旋转 div

Applying a mock bottom-border to a rotated div

html

css

css-shapes