点線を削除

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>