CSS - 创建自定义箭头

Question

您好我正在尝试在CSS中创建一个自定义箭头，如下图所示 理想情况下，我想通过将两个形状叠加成三角形和一个矩形（可能使用CSS :after和:before）来创建它，但是当谈到{{1}时我并不太精明所以我一直在努力。我开始只使用边框，但看起来不会起作用

到目前为止我只有：

CSS

.arrow {
  width: 0;
  height: 0;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid #ccc;
}

Answer 1

使用:before伪元素和一些变换并不太难：

.container {
   padding: 100px;
}

.arrow {
  display: inline-block;
  height: 150px;
  background: #000;
  width: 75px;
}
.arrow:before {
  content: "";
  border-top: 100px solid #000;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid transparent;
  transform: rotateZ(180deg) translateY(100%) translateX(31%);
  position: relative;
  display: inline-block;
}

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

Answer 2

这是另一种选择。

.arrow{
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid #ccc;
  position: relative;
  margin: 0 0 0 100px;
}

.arrow::before{
  content: "";
  height:50px;
  width:80px;
  background: #ccc;
  position: absolute;
  top: 0;
  margin: -100%;
  display: block;
  transform: translateX(-160%) translateY(-50%);
}

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

Answer 3

创建一个矩形，然后在顶部添加三角形:before伪元素，就是这样。

.arrow {
  width: 36px;
  height: 50px;
  background: #3F3F3F;
  position: relative;
  margin: 60px;
}
.arrow:before {
  content: '';
  border-style: solid;
  border-width: 0 40px 40px 40px;
  border-color: transparent transparent #3F3F3F transparent;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
}

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

Answer 4

解释和演示：

通过对1个边框侧进行着色，然后将其他3个边朝向形状中间移动为透明来创建CSS箭头，这样它们就不会显示，而是将剩余的彩色边切成三角形。这方面的简写是TOP RIGHT BOTTOM LEFT。因此，要使三角形朝上，请使用第三个属性或底部。

使用伪元素（如果你想将箭头添加到另一个元素），你需要content:''来“创建”伪元素。我将它们设置为display: block，以便它们在流动中并相互交互（而不是彼此叠加）。

通过给出矩形position: relative，您可以使用left: 30px（三角形宽度的一半）将其放置在三角形的中间。

.arrowWrapper:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 60px 60px 60px;
  border-color: transparent transparent black transparent;
  /* border-color: TOP RIGHT BOTTOM LEFT; */
}

.arrowWrapper:after {
  content: '';
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  background: black;
  left: 30px;
}

<div class="arrowWrapper"></div>

Answer 5

从http://www.cssportal.com/css3-shapes/解除并修改：

＆＃13;

＆＃13;

#eq-triangle {
  width: 0;
  height: 0;
  border-bottom: 104px solid blue;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}

#rectangle {
   width: 40px; 
   height: 80px;
   background: blue;
   margin-left: 40px;
}

＆＃13;

<div id="eq-triangle"></div>
<div id="rectangle"></div>

＆＃13;

＆＃13;

＆＃13;