梯形箭头伸出div

Question

我想创建非常具体的梯形。到目前为止，我在创建梯形形式方面取得了成功。

.trapezoid {
    margin-top : 100px;
    margin-left: 100px;
    border-left: 100px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    width: 0;
    height: 100px;
}

.trapezoid:before {
    margin-top : 100px;
    margin-left: 100px;
    border-left:110px solid gray;
    border-top: 55px solid transparent;
    border-bottom : 55px solid transparent;
    width:0;
    height:110px;
    position: absolute;
    z-index:-1;
    content: "";
    left:3px;
    top:-10px;
}

https://jsfiddle.net/26f4reue/

但作为最终结果，我希望实现类似的目标：

欢迎任何想法。

更新： https://jsfiddle.net/26f4reue/1/

这似乎更接近我想要的东西。现在我可以在里面用箭头创建第二个梯形。

Answer 1

使用CSS：（透视转换）

一种方法是使用与透视图一起旋转的伪元素，如下面的代码片段所示。使用渐变创建在上方和下方延伸的线条，以使整个形状区域透明。

.shape {
  position: relative;
  height: 400px;
  background: linear-gradient(gray calc(100% - 100px), transparent calc(100% - 100px));
  background-position: top left;
  background-size: 2px 50%;
  background-repeat: repeat-y;
}
.shape:before {
  position: absolute;
  content: '';
  height: 76px;
  width: 50px;
  top: calc(50% - 100px);
  left: 0px;
  transform-origin: left 50%;
  transform: perspective(50px) rotateY(15deg);
  padding: 10px 14px 10px 0px;
  border: 2px solid gray;
  border-width: 2px 3px 2px 0px;
  border-left: none;
  background: gray;
  background-clip: content-box;
}
.shape:after {
  position: absolute;
  content: '';
  top: calc(50% - 60px);
  left: 2px;
  width: 20px;
  height: 20px;
  border: 4px solid white;
  border-width: 2px 2px 0px 0px;
  transform: rotate(45deg);
}
body {
  background: radial-gradient(circle at center, chocolate, sandybrown);
  min-height: 100vh;
}

<div class='shape'></div>

如果您不希望形状透明（或背景不是图像/渐变），那么您也可以在下面的代码段中执行此操作：

.shape {
  position: relative;
  height: 400px;
  border-left: 2px solid gray;
}
.shape:before {
  position: absolute;
  content: '';
  height: 76px;
  width: 50px;
  top: calc(50% - 100px);
  left: -2px;
  transform-origin: left 50%;
  transform: perspective(50px) rotateY(15deg);
  border: 2px solid white;
  border-width: 15px 20px 15px 0px;
  border-left: none;
  box-shadow: 0px 2px 0px gray, 2px 0px 0px 1px gray, 0px -2px 0px gray;
  background: gray;
  z-index: 1;
}
.shape:after {
  position: absolute;
  content: '';
  top: calc(50% - 60px);
  left: 2px;
  width: 20px;
  height: 20px;
  border: 4px solid white;
  border-width: 2px 2px 0px 0px;
  transform: rotate(45deg);
  z-index: 1;
}

<div class='shape'></div>

使用SVG：

另一种方法是使用SVG的path和polygon元素，如下面的代码段所示。

svg {
  width: 50px;
  height: 400px;
}
body {
  background: radial-gradient(circle at center, chocolate, sandybrown);
  min-height: 100vh;
}

<svg viewBox='0 0 50 500' preserveAspectRatio='none'>
  <path d='M2,0 2,150 48,185 48,315 2,350 2,500' stroke='gray' fill='transparent' />
  <polygon points='2,165 38,193 38,307 2,335' fill='gray' />
  <path d='M15,235 30,250 15,265' stroke='white' fill='transparent' stroke-width='4' />
</svg>