An advice about border with :before and :after

HTML & CSS
1

изображение
I can’t put pink border like this photo, somebody please help my how to do with CSS.
Here is my code:

<body>

    <div class="main">

        <div class="wedding">

            <img src="./assets/image/wedding.jpg" alt="" width="200px" height="200px">

        </div>

        <div class="frame-1"></div>

        <div class="frame-2"></div>

    </div>    

</body>

*{

    box-sizing: border-box;

}

body{

   font-family: sans-serif;

}

.main{

    position: relative;

    width: 350px;

    height: 350px;

    border: 1px solid black;  

}

.wedding{

    position: absolute;

    top: 25%;

    right: 25%;

    z-index: 2;

}

.frame-1{

    position: absolute;

    width: 200px;

    height: 200px;

    border: 7px solid pink;

    transform: rotateZ(45deg);

    top: 25%;

    right: 25%;

    z-index: 1;

}

.frame1::before{

    content: "";

    display: block;

   
}

.frame-2{

    position: absolute;

    width: 200px;

    height: 200px;

    border: 5px solid pink;

    transform: rotateZ(45deg);

    top: 25%;

    right: 25%;

    z-index: 3;

}
2

I’d approach this in the following manner. We’d also save some HTML by removing those frames.

I wrote it in SCSS to speed things up for me but you can untangle it to regular CSS fairly easily :slight_smile:

3 Likes
3

As a matter of interest (and not really an answer to this question) but you can get an over and under effect with one element using perspective to change the stacking level of one side of an element.

It’s not what the OP wanted unfortunately but is a similar effect and quite interesting.:slight_smile:

3 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.