html - 将菱形放置在两列之间的中心线上

Question

我需要在两列之间添加一条垂直居中的线，其形状为菱形。我知道我可以使用 border 属性实现它，但问题是边框已经排列在列周围。

我怎样才能做到这一点？

.box {
  background: #ccc;
  padding: 25px 20px;
  margin-bottom: 10px;
  border: 1px solid red;
}

.box p,
.box a {
  display: block;
  text-align: center;
}

.grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 45%);
  grid-column-gap: 8%;
}

.rhomb {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  margin: 3px 0 0 30px;
  border: none;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0, 0, 0, 1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: red;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  -webkit-transform-origin: 0 100% 0deg;
  transform-origin: 0 100% 0deg;
}

<div class="grid">
  <div class="box">
    <p>Some text</p>
    <a href="#">link1</a>
  </div>
  <div class="box">
    <p>Some text</p>
    <a href="#">link2</a>
  </div>
  <div class="box">
    <p>Some text</p>
    <a href="#">link3</a>
  </div>
  <div class="box">
    <p>Some text</p>
    <a href="#">link4</a>
  </div>
</div>
<div class="rhomb"></div>

View on JSFiddle

Answer 1

你可以依赖这样的伪元素:

.box {
  background: #ccc;
  padding: 25px 20px;
  margin-bottom: 10px;
  border: 1px solid red;
}

.box p,
.box a {
  display: block;
  text-align: center;
}

.grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 46%);
  grid-column-gap: 8%;
  position: relative;
  box-sizing: border-box;
}

.grid:before {
  content: "";
  position: absolute;
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  background: red;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  transform: rotate(45deg);
}

.grid:after {
  content: "";
  position: absolute;
  box-sizing: content-box;
  width: 2px;
  background: red;
  top: 30px;
  bottom: 30px;
  left: calc(50% - 1px);
}

<div class="grid">
  <div class="box">
    <p>Some text</p>
    <a href="#">link1</a>
  </div>
  <div class="box">
    <p>Some text</p>
    <a href="#">link2</a>
  </div>
  <div class="box">
    <p>Some text</p>
    <a href="#">link3</a>
  </div>
  <div class="box">
    <p>Some text</p>
    <a href="#">link4</a>
  </div>
</div>

更新

如果你想要不止一颗钻石，你可以使用带框的伪元素:

.box {
  background: #ccc;
  padding: 25px 20px;
  margin-bottom: 10px;
  border: 1px solid red;
  position: relative;
}

.box p,
.box a {
  display: block;
  text-align: center;
}

.grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 46%);
  grid-column-gap: 8%;
  position: relative;
  box-sizing: border-box;
}

.grid .box:nth-child(2n)::before {
  content: "";
  position: absolute;
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  background: red;
  top: calc(50% - 10px);
  left:-12%;
  transform: rotate(45deg);
}

.grid .box:nth-child(2n):after {
  content: "";
  position: absolute;
  box-sizing: content-box;
  width: 2px;
  background: red;
  top: 0px;
  bottom: -15px;
  left: -9%;
}

<div class="grid">
  <div class="box">
    <p>Some text</p>
    <a href="#">link1</a>
  </div>
  <div class="box">
    <p>Some text</p>
    <a href="#">link2</a>
  </div>
  <div class="box">
    <p>Some text</p>
    <a href="#">link3</a>
  </div>
  <div class="box">
    <p>Some text</p>
    <a href="#">link4</a>
  </div>
</div>