css - 梯形箭头伸出 div

我想创建非常具体的梯形。到目前为止，我已经成功地创建了梯形形式。

.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/

这似乎更接近我想要的。现在我可以创建带有箭头的第二个梯形。

最佳答案

使用 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>

关于css - 梯形箭头伸出 div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37225598/