Draw dashed border inside the custom shape using HTML & CSS

Question

I have to code a shape(below image) in HTML

And below is the code what I tried so far:

body {
  font: 13px Verdana;
}

h3 {
  height: 100px;
  background: #72bbab;
  border-radius: 50px 10px 10px 50px;
  display: flex;
  margin-top: 50px;
  position: relative;
  line-height: 100px;
  color: #ffffff;
  font-size: 13px;
  font-weight: normal;
}

h3 i {
  width: 130px;
  height: 130px;
  transform: translateY(-15px);
  background: #71bbab;
  border-radius: 50%;
  position: relative;
  margin-right: 20px;
}

h3:before {
  content: "";
  position: absolute;
  border: 1px dashed #fff;
  top: 5px;
  bottom: 5px;
  left: 20px;
  right: 2px;
  border-radius: 10px;
}

h3 i:before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  border: 1px dashed #fff;
  border-radius: 50%;
}

<h3><i></i>Text</h3>

Now the issue is I am not able to remove dashed border of circle from right side. I tried border-top:0 and border-right:0 but didn't work.

Thanks in advance

Note: Don't want to use any king of image

Answer 1

If you need to get the output by keeping same HTML mark-up then you have to use many pseudo selectors, CSS calc() function to calculate h2 tag width and many such properties to get output using CSS.

You have too even use position and z-index to hide circle border backside of h2 tag. And using margin you could arrange the remaining, so at one point whole diagram connects.

body {
  font: 13px Verdana;
}

h3{  
  background:#72bbab;
  width:calc(100% - 95px);
  height:85px;
  margin-left:95px;
  margin-top:21px;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
  padding-left:20px;
  box-sizing:border-box;
  color:#fff;
}
h3 i{
  width:120px;
  height:120px;
  background:#72bbab;
  border-radius:50%;
  display:inline-block;
  top:2px;
  left:2px;
  position:absolute;
  z-index:-1;
  overflow:hidden;
}
h3 i:before{
  content:"";
  width:100px;
  height:100px;
  border:2px dashed #fff;
  position:absolute;
  top:8px;
  left:8px;
  border-radius:50%;
}
h3:before{
  content:"";
  width:calc(100% - 120px);
  height:65px;
  border:2px dashed #fff;
  position:absolute;
  right:15px;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
}
h3:after{
  content:"";
  width:3px;
  height:68px;
  background:#72bbab;
  position:absolute;
  top:28px;
  margin-left:-61px;
}

<h3><i></i>Text</h3>

Answer 2

Try this one, its running as per your image. I have tried a simple and different approach.

JSFiddle Link - https://jsfiddle.net/deepak104080/uwx873x1/

.circle {
  width:130px;
  height:130px;
  border-radius:65px;
  position:absolute;
  z-index:100;
  background:#71bbab;
  margin:0px;
  padding:0px;
}
.innercircle {
  width:110px;
  height:110px;
  border-radius:55px;
  position:absolute;
  top:9px;
  left:9px;
  z-index:100;
  background:#71bbab;
  border: 1px dashed #fff;
}

.tab {
  height: 100px;
  position:absolute;
  margin-top:15px;
  margin-left:105px;
  z-index:1000;
  width:350px;
  background:#71bbab;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
}
.innertab {
  height: 78px;
  position:absolute;
  margin-top:10px;
  margin-left:0px;
  z-index:1000;
  width:340px;
  background:#71bbab;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
  border-top: 1px dashed #fff;
  border-bottom: 1px dashed #fff;
  border-right: 1px dashed #fff;
}

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

<div class="tab">
  <div class="innertab">

</div>
</div>
</div>

Answer 3

See if this helps.

https://jsfiddle.net/induprakash/8ofLjqxm/

I added a higher z-index to rectangle border.

body {
  font: 13px Verdana;
}

h3 {
  height: 100px;
  background: #72bbab;
  border-radius: 50px 10px 10px 50px;
  display: flex;
  margin-top: 50px;
  position: relative;
  line-height: 100px;
  color: #ffffff;
  font-size: 13px;
  font-weight: normal;
}

h3 i {
  width: 130px;
  height: 130px;
  transform: translateY(-15px);
  background: #71bbab;
  border-radius: 50%;
  position: relative;
  margin-right: 20px;
}

h3:before {
  content: "";
    position: absolute;
    border: 1px dashed #fff;
    top: 5px;
    bottom: 5px;
    left: 105px;
    z-index: 10;
    right: 2px;
    border-radius: 0px;
    border-left: 0;
}

h3 i:before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  border: 1px dashed #fff;
  border-radius: 50%;
 border-right : 1px solid #72bbab;
}

Answer 4

Use the ::after pseudo for h3 element.

h3:after {
  z-index: 9999;
  position:absolute;
  max-width: 100%;
  width: 100px;
  height: 87px;
  background: #71bbab;
  content: '';
  left: 35px;
  margin-top: 6px;
}

https://jsfiddle.net/apyupfwo/