Creating contour using css, jquery

Question

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;}

img

user_6108882 · Answer

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;
}

Creating contour using css, jquery

1 Answers