刪除虛線

我關注此鏈接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>

來源

2017-02-27 Alberto

你嘗試在您鏈接到的問題其他答案的方法呢？ – j08691

我看不到任何虛線？ –

[別名與防別名]（https://i.stack.imgur.com/pA7uy.png） – pol

設置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>

來源

2017-02-27 15:52:55

回答

相關問題