Alberto Alberto -4 years ago 118
CSS Question

Remove Dotted Line

I follow this link How to get 'div' shaped as a flag with CSS but now I can't remove dotted line. The code:



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>





enter image description here

Answer Source

Setting background: #fff seems to fix the issue. Apply z-index: -1 too, so that the content isn't covered by the :before and :after now that they're not transparent.

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download