如何创建指向框的自指向箭头

Question

我是小卡住和需要您的帮助，实际上我被困在一个问题，我需要创建一个自我指向箭头到一个矩形框的css，我无法开发它的任何帮助的例子，将不胜感激。

为了更好地理解这个问题，我附加了所需的输出映像。

​

​

我也在分享我尝试过的代码。

​

body {
    box-sizing: border-box;
    margin: 10px;
}

.wrapper {
    display: flex;
}

.container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
}

.container-2 {
    margin-top: 4em;
    height: 75px;
    width: 75px;
    border: 1px solid black;
}

<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>

​

Answer 1

1. 移除左边框
2. 添加了伪元素：：arrow，也可以是类箭头的div。
3. 创建三角形箭头

​

body {
    box-sizing: border-box;
    margin: 10px;
}

.wrapper {
    display: flex;
}

.container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
}

.container-2 {
    margin-top: 4em;
    height: 75px;
    width: 75px;
    border: 1px solid black;
    border-left: none;
    position: relative;
}
.container-2:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-right: 8px solid black;
    border-bottom: 4px solid transparent;
    position: absolute;
    left: 0;
    bottom: -4px;
}

<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>

​

Answer 2

您可以给第二个框一个伪元素，并使用clip-path创建一个小箭头：

​

body {
    box-sizing: border-box;
    margin: 10px;
}

.wrapper {
    display: flex;
}

.container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
}

.container-2 {
    margin-top: 4em;
    height: 75px;
    width: 75px;
    border: 1px solid black;
    border-left-width: 0;
    position: relative;
}

.container-2::after {
  content: '';
  display: block;
  position: absolute;
  background-color: black;
  width: 10px;
  height: 10px;
  clip-path: polygon(100% 0, 80% 50%, 100% 100%, 0 50%);
  bottom: 0;
  left: 0;
  transform: translateY(50%);
}

<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>

​

Answer 3

也许这个伪元素：：使用unicode箭头之后？

我还移除了左边的边框

​

body {
  box-sizing: border-box;
  margin: 10px;
}

.wrapper {
  display: flex;
}

.container {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.container-2 {
  margin-top: 4em;
  height: 75px;
  width: 75px;
  border: 1px solid black;
  border-left:0;
}

.container-2::after {
  content: "⮜";
  position: absolute;
  top: 140px;
}

<div class="wrapper">
  <div class="container"></div>
  <div class="container-2"></div>
</div>

​