Html CSS中图像之间的样式分隔符链接

.divider {
  height: 100px; /* total divider height - could also be fluid */
  margin: 0 50px; /* spacing from parent element at sides */
  position: relative;
}

.divider::before,
.divider::after {
  content: '';
  position: absolute;
  height: calc(50% - .5px);  /* allow for half the border width */
  width: calc(50% - .5px);  /* allow for half the border width */
}

.divider::before {
  border-bottom: 1px dashed #8c8c8c;
  border-left: 1px dashed #8c8c8c;
  border-bottom-left-radius: 20px;
  top: 0;
  left: 0;
}

.divider::after {
  border-top: 1px dashed #8c8c8c;
  border-right: 1px dashed #8c8c8c;
  border-top-right-radius: 20px;
  right: 0;
  bottom: 0;
}

.divider-ends::before,
.divider-ends::after {
  content: '•';
  position: absolute;
  line-height: 0;
  color: #8c8c8c;
}

.divider-ends::before {
  top: 0;
  left: 0;
  transform: translateX(-50%); /* shift half of character width */
}

.divider-ends::after {
  bottom: 0;
  right: 0;
  transform: translateX(50%); /* shift half of character width */
}

<div class="divider">
  <div class="divider-ends">
</div>