删除虚线

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>