Need input on css to design a div

Question

I have a basic knowledge on CSS. Below is the design I am trying to achieve. I am attaching a fiddle that I have been working on to achieve this.

As per below image I can see I can have two div and two hr tags; but not sure about the arrow on right and verticle line, circle on bottom and gray vertical box overlapping inner div.

FIDDLE that I am setting up.

<div id="main_content" >
<div id="container">
</div>

#main_content {
width: 400px;
min-height: 200px;
height: auto;
background-color: #000;
position: relative;

}

#container {
    width: 360px;
    height: 160px;
    margin:auto;
    padding: 10px;
    background-color:#555;
    top: 10%;
}

EDIT 1: I came this far : Fiddle

Answer 1

So I provide a solution that 'draw' your expected result by using some absolute positioning referring to the #container. It as the advantage to be easier to make responsive and use only one wrapper:

body {
  background: black;
  padding: 50px;
}

#container {
  position: relative;
  display: flex;
  width: 200px;
  height: 180px;
  padding: 10px;
  border: 4px solid #c4c4c4;
  color: #fff;
}

#arrows {
  position: absolute;
  top: -20px;
  right: -20px;
  display: flex;
  flex-flow: column;
}

.arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff;
  margin-top: 2px;
}

.left-line {
  margin-left: 20px;
  border: 0.1px solid #c4c4c4;
}

.top-lines {
  position: absolute;
  top: -15px;
  left: -20px;
  width: 100%;
}

.top-lines .line {
  width: calc(100% + 20px);
}

.top-lines .line:nth-child(2) {
  margin-top: 5px;
  transform: translateX(-20px)
}

.line {
  border-top: 1px solid #c4c4c4;
}

.line.left {
  position: absolute;
  top: -20px;
  left: -10px;
  border-left: 1px solid #c4c4c4;
  height: 100%;
}

.circles {
  position: absolute;
  left: -25px;
  bottom: -30px;
  height: 50px;
  width: 50px;
}

.circle {
  height: 100%;
  width: 100%;
  border: 1px solid #c4c4c4;
  border-radius: 50%;
}

.circles .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circles .circle:nth-child(2) {
  height: 70%;
  width: 70%;
}

.transparent-rect {
  position: absolute;
  height: 60%;
  width: 30px;
  bottom: 25px;
  left: -20px;
  background-color: rgba(255, 255, 255, .2)
}

<div id="container">
  <p>This is inner div</p>

  <div class="top-lines">
    <div class="line"></div>
    <div class="line"></div>
  </div>

  <div class="line left"></div>

  <div class="circles">
    <div class="circle"></div>
    <div class="circle"></div>
  </div>

  <div id="arrows">
    <div class="arrow"></div>
    <div class="arrow"></div>
    <div class="arrow"></div>
  </div>

  <div class="transparent-rect"></div>
</div>

Answer 2

Here it is ... ;-)

Short explanation

I reworked your structure and added an outer-styling-wrapper to have an anchor to position the styling elements.

Now I am able to move the styling by an absolute potioning to their place.

If you want to change the position now yu can do that just changing the positoning values. Values are calculate to the edges of the outer-styling-wrapper top|right|bottom|left.

Overview to structure:

<div id="element-wrapper">

   <div id="outer-styling-wrapper">

      <div id="content">
         Add content here
      </div>

      <!-- styling elements: absolute position relative to outer-styling-wrapper -->

      <div id="line-top1"></div>
      <div id="line-top2"></div>
      ...
      ... more see example

   </div>

</div>

READY STYLED ELEMENT

Please see comments in code to work with it ...
... AND ADAPT SIZES IN CSS TO YOUR NEEDS ;-)

/**********************************************
   structure first
   --> to align styling elements on structure
***********************************************/
#element-wrapper,
#element-wrapper * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#element-wrapper {
  position: relative;
  width: 400px;
  padding: 30px;
  background-color: #2b2b2b;
  border-radius: 15px;
}

#outer-styling-wrapper {
  position: relative;
  /* 
   * padding values are for space arount content box to outer styling wrapper
   * values depends on size of arrows / circles
   * STYLING ANCHOR POINTS ARE
   * --> top-right: upper right arrow
   * --> bottom-left: outer circle
  */
  padding-top: 27px;
  padding-right: 25px;
  padding-bottom: 20px;
  padding-left: 13.3333333333px;
  /*
   * design-elements anchored to outer-styling-wrapper
   * to see the edges where the elements are anchored
   * just activate this class
  border: 1px dotted red;
  */
}

#content {
  height: 200px;
  padding: 10px;
  border: 4px solid #c4c4c4;
  color: #fff;
}

/****************************************************
   styling second 
   --> use structure as anchor for styling elements
*****************************************************/
/*** styling arrows ***/
#arrow-wrapper {
  position: absolute;
  /* anchor element to top-right edge of outer-styling-wrapper */
  top: 0;
  right: 0;
}

.arrow {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid #fff;
  margin-bottom: 10px;
}

/*** styling lines ***/
.lines {
  background-color: #c4c4c4;
}

#line-top1 {
  position: absolute;
  /* anchor points:
     calculate values from: top|right|left edge of outer styling box */
  top: 10px;
  right: 27px;
  left: -10px;
  height: 1px;
}

#line-top2 {
  position: absolute;
  /* anchor points: 
     calculate values from: top|right|left edge of outer styling box */
  top: 20px;
  right: 50px;
  left: -20px;
  height: 1px;
}

#line-right {
  position: absolute;
  /* anchor points: 
     calculate values from: top|bottom|left edge of outer styling box */
  top: -7.5px;
  bottom: 42px;
  left: 5px;
  width: 1px;
}

/*** styling pad ***/
#styling-pad {
  position: absolute;
  /* anchor points: 
     calculate values from: left|bottom edge of outer styling box */
  left: 0px;
  bottom: 55px;
  width: 30px;
  height: 35%;
  background-color: rgba(196, 196, 196, 0.5);
}

/*** styling circles ***/
.styling-circles {
  border: 1px solid #c4c4c4;
  border-radius: 50%;
}

#styling-circle-outer {
  position: absolute;
  /* anchor points: 
     calculate values from: left|bottom edge of outer styling box */
  left: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  /* center inner circle with flexbox*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#styling-circle-inner {
  width: 30px;
  height: 30px;
}

<div id="element-wrapper">

    <div id="outer-styling-wrapper">


        <!-- content box -->

        <div id="content">

            This is inner CONTENT div

        </div><!-- #content -->


        
        <!--  styling elements -->

        <div id="line-top1" class="lines"></div>
        <div id="line-top2" class="lines"></div>
        <div id="line-right" class="lines"></div>

        <div id="arrow-wrapper">
            <div class="arrow"></div>
            <div class="arrow"></div>
            <div class="arrow"></div>
        </div>

        <div id="styling-pad"></div>

        <div id="styling-circle-outer" class="styling-circles">
            <div id="styling-circle-inner" class="styling-circles"></div>
        </div>

        
    </div><!-- #outer-styling-->

</div><!-- #element-wrapper -->

Answer 3

Try this one I added the arrows to right. You would need more or less same steps to add other items to your HTML and CSS.

#main_content {
  width: 400px;
  min-height: 200px;
  height: auto;
  background-color: #000;
  position: relative;
  border-radius: 10px;
  display: flex;
}

#container {
  width: 360px;
  height: 160px;
  margin: auto;
  padding: 10px;
  background-color: #555;
  top: 10%;
}

#arrow_div {
  display: flex;
  flex-flow: column;
}

#arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid gray;
}

<div id="main_content">
  <div id="container">
  </div>
  <div id="arrow_div">
    <div id="arrow">

    </div>
    <div id="arrow">

    </div>
    <div id="arrow">

    </div>
  </div>

</div>