css - 删除虚线

Question

我点击此链接 How to get 'div' shaped as a flag with CSS但现在我无法删除虚线。代码:

div {
  height: 100px;
  width: 100px;
  margin: 100px auto;
  position: relative;
  overflow: hidden;
  border: solid 3px #000;
  border-bottom: none;
  text-align: center;
}
div:before,
div:after {
  content: '';
  display: block;
  height: 100%;
  width: 200%;
  transform: rotate(20deg);
  box-shadow: 46px 0 0 3px #000;
  position: absolute;
  top: 1px;
  right: -120%;
}
div:after {
  transform: rotate(-20deg);
  left: -120%;
  box-shadow: -46px 0 0 3px #000;
}

<div>Test</div>

Answer 1

设置 background: #fff 似乎可以解决这个问题。也应用 z-index: -1，这样内容就不会被 :before 和 :after 覆盖，因为它们是不透明。

div {
  height: 100px;
  width: 100px;
  margin: 100px auto;
  position: relative;
  overflow: hidden;
  border: solid 3px #000;
  border-bottom: none;
  text-align: center;
}
div:before,
div:after {
  content: '';
  display: block;
  height: 100%;
  width: 200%;
  transform: rotate(20deg);
  box-shadow: 46px 0 0 3px #000;
  position: absolute;
  top: 1px;
  right: -120%;
  /* Setting the background
     covers the "dotted line" */
  background: #fff;
  /* It also covers the content
     so we need to move it underneath
     with z-index */
  z-index: -1;
}
div:after {
  transform: rotate(-20deg);
  left: -120%;
  box-shadow: -46px 0 0 3px #000;
}

<div>Test</div>