Devil's Dream Devil's Dream - 1 month ago 8
CSS Question

Border radius of complex shape

I am trying to get the following shape as css. Anybody help me to get any kind of tutorial or code snippet of how to having this king of shape as css?

enter image description here

Answer

You'll need a few extra elements two create the thingies on the left and right.

Note: this works only on a solid background (in this case the white background used on .ws_left:before and .ws_right:before

body { margin: 5em; }
.ws {
  position: relative;
  width: 15em;
  height: 15em;
  background: gray;
  border-radius: 0 0 1em 1em;
}
.ws_left {
  position: absolute;
  top: 0;
  left: -4em;
  right: 100%;
  height: 2.5em;
  background: gray;
  border-radius: 1em 0 0 1em;
}
  .ws_left:before, .ws_left:after,
  .ws_right:before, .ws_right:after {
    content: '';
    position: absolute;
    background: red;
    width: 1em;
    height: 1em;
    top: 100%;
    right: 0;
    z-index: 1;
  }
  .ws_left:before {
    border-top-right-radius: 1em;
    background: white;
    z-index: 2;
  }
  .ws_left:after {
    background: gray;
  }

  .ws_right:before, .ws_right:after {
    right: auto;
    left: 0;
  }
  .ws_right:before {
    border-top-left-radius: 1em;
    background: white;
    z-index: 2;
  }
  .ws_right:after {
    background: gray;
  }
.ws_right {
  position: absolute;
  top: 0;
  left: 100%;
  right: -2em;
  height: 2.5em;
  background: gray;
  border-radius: 0 1em 1em 0;
}
<div class="ws">
  <div class="ws_left"></div>
  <div class="ws_right"></div>
</div>

Comments