Limit Shape's Border with CSS

Question

I need to achieve an effect like in this demo.

But the code I used there is too specific and not very clean. As you can see I have used quite a lot of elements and also some transforms with very specific angle calculations.

Is there a way for me to create this shape, keep it responsive but in a cleaner way? Please note that I don't want just half a circle, but a very specific angle that I could adapt. I mean the circle could be more or less inside the rectangle, so the angle of the arc would be more or less big.

CSS:

.rectangle {
  background-color: white;
  width:200px;
  height:200px;
  border:solid 1px navy;
}
.circle {
  position: relative;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: white;
  margin-top:calc(50% - 35px);
  margin-left:calc(100% - 50px);
}
.arc {
  overflow: hidden;
  position: absolute;
  top: -1px; right: 50%; bottom: 50%; left: -1px;
  transform-origin: 100% 100%;
  transform: rotate(115deg);
}
.arc:before {
  box-sizing: border-box;
  display: block;
  border: solid 1px navy;
  width: 200%; height: 200%;
  border-radius: 50%;
  content: '';
}

.arc2 {
  overflow: hidden;
  position: absolute;
  top: -1px; right: 50%; bottom: 50%; left: -1px;
  transform-origin: 100% 100%;
  transform: rotate(155deg);
}
.arc2:before {
  box-sizing: border-box;
  display: block;
  border: solid 1px navy;
  width: 200%; height: 200%;
  border-radius: 50%;
  content: '';
}

HTML:

<div class='rectangle'>
  <div class='circle'>
    <div class='arc'></div>
    <div class='arc2'></div>
  </div>
</div>

Points to Note:

I cannot use z-index, it was my first solution but it causes other problems.
The height of the rectangle can change and so I'd need it to be responsive but the height of the circle should stay the same even if the height of the container gets bigger
I can use SVG if that is an option.

What exactly does _"a very specific angle that I could adapt"_ mean? — Alon Eitan, Mar 23 '16 at 18:21
Please, be concise, people will most likely write some answers and than what?! Explain immediately your thoughts. — Roko C. Buljan, Mar 23 '16 at 18:32
Related: http://stackoverflow.com/questions/21687326/can-i-make-an-irregular-div-shape-using-only-css — TylerH, Mar 23 '16 at 18:42
@AlonEitan When I say a very specific angle that i could adapt , i mean like the circle could be more or less inside the rectangle, so the angle of the arc would be more or less big — Titozzz, Mar 25 '16 at 08:25
@Harry I need not to use z-index, it was my first solution and it causes other problems — Titozzz, Mar 25 '16 at 08:40
@Titozzz: How about something like [this](http://jsfiddle.net/05ntjb2b/2/) then? I'd honestly recommend SVG. If you want I can give a sample for that also in the answer :) — Harry, Mar 25 '16 at 09:00
@Harry Is it possible to see the result with svg ? This one feels a little cheap, I see a hole in the border. — Titozzz, Mar 25 '16 at 09:10
@Harry, yes the height of the rectangle can change, so i'd love it to be responsive — Titozzz, Mar 25 '16 at 09:38
@Harry If you want I can try it, and tell you if it's good :) — Titozzz, Mar 25 '16 at 09:52
hey, it is nice but still not what i'm looking for, the height of the circle should stay the same even if the height of the container gets bigger ... :) — Titozzz, Mar 25 '16 at 12:24
@Titozzz: Last shot. How about [this](http://jsfiddle.net/05ntjb2b/4/)? — Harry, Mar 25 '16 at 12:40
Hey that's great, can you add this as answer so i can accept it ! :) — Titozzz, Mar 25 '16 at 13:08

score 2 · Accepted Answer · answered Mar 25 '16 at 15:24

I would generally recommend using SVG for such shapes because it is easier to create and maintain arcs with it. Using SVG would also mean better control over the radius, the arc's start and end angles etc but I don't think we can make part of the shape be responsive (the rectangle) while keeping other part as static (the circle's height) and hence it might be safer to use CSS.

In CSS also, it is tough to achieve this with a single element because you've indicated that z-index cannot be used. Other approaches (like making the element's width larger than height or using scale) would result in an elliptical arc and it would also require tweaking to positioning attributes when height or width changes.

Considering all those the below approach using a couple of elements and a pseudo-element could be the best bet. The .inner element is placed on top of the right border of the .rectangle and its width is just enough to get the circle to display. Inside the .inner element, the pseudo element that creates the circle is placed with a negative left offset so that only a part of the circle is visible (due to overflow being hidden on .inner). The output is responsive.

.rectangle {
  position: relative;
  background-color: white;
  width: 200px;
  height: 200px;
  border: solid 1px navy;
}
.inner {
  position: absolute;
  left: 100%;
  top: -1px;
  height: calc(100% + 2px);
  width: 30px;
  overflow: hidden;
}
.inner:after {
  position: absolute;
  content: '';
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: white;
  top: calc(50% - 35px);
  left: -45px;
  border: 1px solid navy;
}

/* Just for demo */

.rectangle {
  transition: all 1s ease;
}
.rectangle:hover {
  height: 400px;
}

<div class='rectangle'>
  <div class="inner"></div>
</div>

Limit Shape's Border with CSS

1 Answers1