CODEWITHSUNDEEP
htmlcss
Sharon S
Sharon S

Reputation: 365

Overlapping part circles in css

enter image description here

How would you approach this in css?

This is what I have so far, but it is far from the designers vision.

My method has been to have a before and after pseudo selector, one for the top slim half circle (the before pseudo selector), and the after pseudo selector the thicker part circle at the bottom - which is on a slight angle - however it is also not a full half circle - only 1/3 a circle or so.

The designers aren't available to consult with.

Any suggestions? 

 .searchText {
  color: black;
  display: block;
  position: relative;
  height: 40px;
  width: 196px;
  font-size: 18px;
  font-weight: 600;
  line-height: 21px; 
  top: 100px;
  left: 100px;
}
  .searchText:before {
    content: "";
    position: absolute;
    top: -25px;
    left: -18px;
    box-sizing: border-box;
    height: 28px;
    width: 56px;
    border: 2px solid #f57e22;
    border-bottom: 0;
    border-top-left-radius: 28px;
    border-top-right-radius:28px;
  }
.searchText:after {
    content: "";
    box-sizing: border-box;
    
    height: 28px;
    width: 56px;
    border: 5px solid #f57e22;
    border-top: 0;
    position: absolute;
    top: 10px;
    bottom: 2px;
    left: -26px;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius:28px;
   transform: rotate(20deg);
  
  }
<span class="searchText">Search</span>

Upvotes: 3

Views: 340

Answers (1)

Temani Afif
Temani Afif

Reputation: 272806

You can try it like below. If you color only the left and bottom border you will approximate your 1/3 circle:

.box {
  display:inline-block;
  padding:20px 0 20px 25px;
  font-weight:bold;
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  top:2px;
  left:0;
  width:40px;
  height:20px;
  border-radius:25px 25px 0 0;
  border:2px solid #f57e22;
  border-bottom:none;
  transform:rotate(-6deg); /*a small rotation to this one to avoid the text overlap*/
}
.box::after {
  content:"";
  position:absolute;
  bottom:9px;
  left:0;
  width:40px;
  height:20px;
  border-radius: 0 0 25px 25px;
  border:4px solid #f57e22;
  border-top:none;
  border-right-color:transparent;
}
<div class="box">
  Search
</div>

Upvotes: 2

Related Questions