对旋转后的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元素创建的，而底部的行是使用父容器创建的。旋转轴是固定的，使用相同的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>