“CSS заставляет границу вращаться вокруг элемента” Ответ

CSS заставляет границу вращаться вокруг элемента

.b-border{
    display: inline-block;
    position: relative;
    border: solid #333;
    border-width: 1px 1px 0px 1px;
    padding: 20px;
    margin-bottom: 100px;
}
.b-border.border-right{
  border-width: 1px 0 1px 1px;
}

.b-border.border-right:after{
    content: "";
    position: absolute;
    right: -30px;
    border-top: 1px solid #333;
     border-left: none medium;
    top: -1px;
    left: auto;
    width: 30px;
    height: 100%;
    background: linear-gradient(to top left, white calc(50% - 1px), #000 1px, white 50%);
}
.b-border:after{
    content: "";
    position: absolute;
    left: -1px;
    bottom: -15%;
    border-left: 1px solid #333;
    height: 15%;
    width: calc(100% + 1px);
    background: linear-gradient(to right bottom, white calc(50% - 1px), #000 1px, white 50%);
}
DevLorenzo

CSS заставляет границу вращаться вокруг элемента

<div class="b-border border-right">
    Hello :)
</div>
<p></p>
<div class="b-border" style="width: 300px;">
    Lorem ipsum dolor sit amet, consectetur 
    Lorem ipsum dolor sit amet, consectetur
    Lorem ipsum dolor sit amet, consectetur
     Lorem ipsum dolor sit amet, consectetur 
     Lorem ipsum dolor sit amet, consectetur 
</div>
DevLorenzo

Ответы похожие на “CSS заставляет границу вращаться вокруг элемента”

Вопросы похожие на “CSS заставляет границу вращаться вокруг элемента”

Больше похожих ответов на “CSS заставляет границу вращаться вокруг элемента” по CSS

Смотреть популярные ответы по языку

Смотреть другие языки программирования