CODEWITHSUNDEEP
htmljquerycss
ramesh.a
ramesh.a

Reputation: 141

Creating contour using css, jquery

I want to create contour as in image exactly. I tried but I couldn't. Is it possible to do this like provided image. In my try, I used lot's of html child tags to achive this but I wish to minimal it. Is there any way to do it simply.

*{margin: 0; padding: 0; box-sizing: border-box;}
        .parent, .child {
            display: flex;
            border: 1px solid gray;
        }
        .parent {
            width: 50%;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }
        .child {
            padding: 15px;
            border-radius: 50px;
        }
        .one {width: 20vw; height: 15vh;}
<div class="parent">
        <div class="child">
            <div class="child">
                <div class="child">
                    <div class="child">
                        <div class="child">
                            <div class="child">
                                <div class="child">
                                    <div class="child">
                                        <div class="child">
                                            <div class="child">
                                                <div class="child one">img</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

enter image description here

Upvotes: 2

Views: 427

Answers (1)

Udhay Titus
Udhay Titus

Reputation: 5869

Are you looking something like this. Use box-shadow instead of multiple div and multiple css class.

img {
  margin:60px;
  background-color:#eee;
  width: 20vw; height: 15vh;
  border-radius: 50px;
  box-shadow:
    0 0 0 2px #aaa,
    0 0 0 10px #eee,
    0 0 0 12px #aaa,
    0 0 0 20px #eee,
    0 0 0 22px #aaa,
    0 0 0 30px #eee,
    0 0 0 32px #aaa,
    0 0 0 40px #eee,
    0 0 0 42px #aaa,
    0 0 0 50px #eee,
    0 0 0 52px #aaa,
    0 0 0 60px #eee;
}
<img src="" alt="Image">

Upvotes: 2

Related Questions