片方の歪んだdivの全面にボーダー

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>