删除虚线

我关注此链接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

回答

相关问题