Create reverse border from top right and bottom right

Question

I have used this link Reverse border radius with css3 to achieve my goal but unable to create the same shape

See the code below

body {
        background: #ff0015;
        padding: 50px;
    }

    .box {
        float: left;
        width: 50px;
        padding: 10px 15px;
        height: 30px;
        position: relative;
        background: #fff;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
    }

    .box:before,
    .box:after {
        content: "";
        position: absolute;

        height: 10px;
        width: 20px;

        bottom: 0;
    }

    .box:after {
        right: 0;
    border-radius: 10px 0 0 0px;
    box-shadow: 0px 10px 0 0 #fff;
    bottom: -5px;
    }

    .box:before {
        top: -5px;
    border-radius: 0 0px 0px 10px;
    box-shadow: 0px -10px 0 0 #fff;
    right: 0;
    }

<div class="box"></div>

score 1 · Answer 1 · answered Sep 06 '20 at 18:52

Try to make another box and apply some border-radius on it and adjust it near the main box and seriously it will look like an expected output

Example

body {
  background: #ff0015;
  padding: 50px;
}

.box {
  float: left;
  width: 50px;
  padding: 10px 15px;
  height: 30px;
  position: relative;
  background: #fff;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.box_2 {
  position: relative;
  top: -20px;
  float: left;
  width: 10px;
  padding: 10px 15px;
  height: 70px;
  position: relative;
  background: #fff;
}

.box_2:before,
.box_2:after {
  content: '';
  position: absolute;
  left: 0;
  height: 20px;
  width: 99%;
  background: red;
}

.box_2:before {
  top: 0;
  border-radius: 0 0 110px 0;
}

.box_2:after {
  bottom: 0;
  border-radius: 0 110px 0 0;
}

<div class="box"></div>
<div class="box_2"></div>

score 1 · Answer 2 · answered Sep 06 '20 at 19:06

you may use radial-gradient instead border-radius .

With a transparent color, it can also allow you to add a shadow or a border with a filter:

html {
  background: linear-gradient(45deg, #ff0015 , blue,yellow,gray,purple,green,silver) 0 0 /100vw 100vh;
  padding: 50px;
}

.box {
  float: left;
  width: 50px;
  padding: 10px 15px;
  height: 30px;
  position: relative;
  background: #fff;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  filter:drop-shadow(0px 0px 5px black);
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  bottom: 0;
  background:radial-gradient(circle at top left, #fff0 72%, #fff 75%);
}

.box:after {
  right: 0;
  top:100%;
  background:radial-gradient(circle at bottom left, #fff0 70%, #fff 75%);
}

.box:before {
  bottom:100%;
 right: 0;
}

<div class="box"></div>

Create reverse border from top right and bottom right

2 Answers2

Example