将模拟底边框应用于旋转的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>