想要将CSS箭头放在指向一个方向的相邻div上

Question

我试图创建3个div，左边是箭头，中间div指向右边的div。我可以让第一个指向中心但是只要我为中心添加代码并重命名div它就会消失。

我想我可能需要某种::before运算符才能让它工作但不确定。基本上我想要一个粉红色的div，粉红色的箭头指向一个奶油色的div，奶油色的箭头指向一个蓝色的div：

以下是我正在使用的代码：

.hero-box-pink {
  position: relative;
  background: #ab255c;
}

.hero-box-pink:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(171,37,92,0);
  border-left-color: #ab255c;
  border-width: 30px;
  margin-top: -30px;
}

.hero-box-cream {
  position: relative;
  background: #fcfbe3;
}

.hero-box-cream:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(252,251,227,0);
  border-left-color: #fcfbe3;
  border-width: 30px;
  margin-top: -30px;
}

提前感谢您提供任何帮助。

Answer 1

希望这就是你要找的东西。

.container {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.box {
  width: calc(100% /3);
  padding: 20px 40px;
  box-sizing: border-box;
  color: #fff;
}
.first-box {
  background: #88b7d5;
}
.second-box {
  background-color: tomato;
}
.third-box {
  background: skyblue;
}
.arrow_box {
  position: relative;
}
.arrow_box:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-left-color: #88b7d5;
  border-width: 30px;
  margin-top: -30px;
  z-index: 99;
}
.first-box.arrow_box:after {
  border-left-color: #88b7d5;
}
.second-box.arrow_box:after {
  border-left-color: tomato;
}

<div class="container">
  <div class="box first-box arrow_box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat.</div>
  <div class="box second-box arrow_box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat.</div>
  <div class="box third-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sapiente, quasi. Blanditiis ullam sint magnam, aspernatur optio vero explicabo quibusdam voluptatem beatae aliquid magni! Tempore numquam debitis, eum voluptatum atque.</div>
</div>

Answer 2

您也可以使用flex属性并旋转：

body {
  display: flex;
  margin: 1em;
}
p {
  padding: 2em;
}
p:first-of-type,
p:last-of-type {
  position: relative;
  background: #AB255C;
}
p:last-of-type {
  background: #00617A;
}
p:before {
  content: '';
  background: inherit;
  position: absolute;
  top: 50%;
  margin: -1em;
  height: 2em;
  width: 2em;
  transform: rotate(45deg);
  right: 100%;
}
p:first-of-type:before {
  left: 100%;
}

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  luctus, metus</p>

旋转伪元素可能允许您在整个元素（包括箭头）周围绘制边框或阴影或两者。

body {
  display:flex;
  margin:1em;
}
p {
  padding:2em;
}
p:first-of-type,
p:last-of-type {
  position:relative;
  background:#AB255C;
  box-shadow:0 0 0 3px gray,0 0 5px 5px
}
p:last-of-type {
  background:#00617A;
}
p:before {
  content:'';
  background:inherit;
  position:absolute;
  top:50%;
  margin:-1em -1.2em;
  height:2em;
  width:2em;
  transform:rotate(45deg);
  right:100%;
  box-shadow:-3px 3px gray, -5px 5px 5px 
}
p:first-of-type:before {
  left:100%;
  box-shadow:3px -3px gray, 5px -5px 5px 
  
}

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  luctus, metus</p>

这是 demo to play with 或分叉