單面歪斜格子各邊的邊框

Question

我想給各邊單邊格子歪斜的框子，但我無法這樣做。

這個寫CSS代碼是

.block{ 
    height: 400px; 
    width: 100%; 
    position: relative; 

    background: yellow; 
    height: 100px; 
    width: 100px; 
    border-top: 2px solid teal; 
    border-bottom: 2px solid teal; 
    border-left: 2px solid teal; 
} 
.block::after{ 
    content: ''; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    background: inherit; 
    z-index: -1; 
    top:0; 
    right:0; 
    transform-origin: right bottom ; 
    transform: skewX(-20deg); 
    border-right: 2px solid teal; 
} 

DEMO

有沒有人有這個問題的解決方案？

Answer 1

所有你需要做的就是多玩一點僞元素的邊界和位置。事情是這樣的：

.block { 
 
    position: relative; 
 
    background: black; 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid teal; 
 
    border-right: none; 
 
} 
 

 
.block::after{ 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background: inherit; 
 
    z-index: -1; 
 
    top: -2px; 
 
    right: -2px; 
 
    transform-origin: right bottom; 
 
    transform: skewX(-20deg); 
 
    border: 2px solid teal; 
 
}

<div class="block"></div>