divの隅を十字架にする方法

Question

divの各罫線を1つまたは2つのピクセルを各コーナーに十字にする方法がありますか？

Answer 1

デフォルトのCSS borderプロパティでそれを行うことはできません。しかし、あなたはdivのため:beforeと:afterセレクタを試みることによって、あなたが望むものを達成することができます：

<div class="cross-borders"></div> 

.cross-borders { 
    width:200px; 
    height:200px; 
    border:1px solid #000; 
    border-top:0; 
    border-bottom:0; 
    position:relative; 
    margin:20px auto; 
} 
.cross-borders:before, 
.cross-borders:after { 
    content: ' '; 
    width:210px; 
    height:1px; 
    background-color:#000; 
    position:absolute; 
    top:5px; 
    left:-5px; 
} 
.cross-borders:after { 
    top: auto; 
    bottom: 5px; 
} 

JSFiddle