html - CSS 在 Box(div) 的每一侧放置箭头

Question

需要有关如何在盒子的每一侧都指向外的箭头的帮助。

我有我在另一个堆栈问题上看到的箭头的框和基本 CSS。

需要帮助在该框中创建四个箭头

我是一名 Java 开发人员，所以这不是我的菜

盒子:

#myBox {
  width: 150px;
  height: 150px;
  background-color: grey;
  border: 1px solid black;
}
/*Chevron*/
.Chevron {
  position: relative;
  display: block;
  height: 50px;
  /*height should be double border*/
}
.Chevron:before,
.Chevron:after {
  position: absolute;
  display: block;
  content: "";
  border: 25px solid transparent;
  /*adjust size*/
}
/*Change four 'top' values below to rotate (top/right/bottom/left)*/

.Chevron:before {
  top: 0;
  border-top-color: #b00;
  /*Chevron Color*/
}
.Chevron:after {
  top: -50px;
  /*adjust thickness*/
  border-top-color: #fff;
  /*Match background colour*/
}

<div id="myBox"></div>





<i class="Chevron"></i>

Answer 1

由于您希望与这些形状进行交互，因此您最好采用不同的方法来制作三 Angular 形，而不是边框​​修改。

.box {
  height: 150px;
  width: 150px;
  background: lightgray;
  position: relative;
}
.wrap {
  position: absolute;
  top: 0;
  left: 25%;
  height: 25%;
  width: 50%;
  overflow: hidden;
}
.touch {
  position: absolute;
  top: 0;
  left: 50%;
  height: 200%;
  width: 200%;
  transform: rotate(45deg);
  transform-origin: top left;
  background: gray;
  cursor: pointer;
}
.wrap:nth-child(2) {
  transform: rotate(90deg);
  transform-origin: top left;
  top: 25%;
  left: 100%;
}
.wrap:nth-child(3) {
  transform: rotate(180deg);
  transform-origin: top left;
  top: 100%;
  left: 75%;
}
.wrap:nth-child(4) {
  transform: rotate(-90deg);
  transform-origin: top left;
  top: 75%;
  left: 0;
}
.touch:hover {
  background: tomato;
}

<div class="box">
  <span class="wrap"><span class="touch"></span></span>
  <span class="wrap"><span class="touch"></span></span>
  <span class="wrap"><span class="touch"></span></span>
  <span class="wrap"><span class="touch"></span></span>

</div>

我使用了 nth-child 来正确定位箭头。我还需要使用包装器 div like in this answer因为 border-hack 在 HitTest 中不起作用。