在一边倾斜的div的所有边上的边界

Question

我想在一个单侧歪斜的盒子上设置一个边框，但我无法这样做。

为此编写的css代码是

<tbody></tbody>

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>