“CSS membuat perbatasan berputar di sekitar elemen” Kode Jawaban

CSS membuat perbatasan berputar di sekitar elemen

.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 membuat perbatasan berputar di sekitar elemen

<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

Jawaban yang mirip dengan “CSS membuat perbatasan berputar di sekitar elemen”

Pertanyaan yang mirip dengan “CSS membuat perbatasan berputar di sekitar elemen”

Lebih banyak jawaban terkait untuk “CSS membuat perbatasan berputar di sekitar elemen” di CSS

Jelajahi jawaban kode populer menurut bahasa

Jelajahi bahasa kode lainnya