Div with cut corners

Question

Can anyone please help/guide me to design like this? I tried many solutions but not successful. Scooped corners example

What are your efforts so far. Please show us your code where you stuck. — Cyberduck, Nov 05 '18 at 18:57
`I tried many solutions but not successful.` please include those solutions, so we people can know that you actually tried, instead of just asking `code this for me` — Rainbow, Nov 05 '18 at 19:02

score 0 · Answer 1 · answered Nov 05 '18 at 19:19

.name{
  width:500px;
  height:500px;
  background-color:green;
  position:relative;
}
.rithtopcorner{
  width:50px;
  height:50px;
  background:white;
  position:absolute;
  top:0;
  right:0;
  border-bottom-left-radius:100%;
}
.riboco{
  width:50px;
  height:50px;
  background:white;
  position:absolute;
  top:0;
  left:0;
  border-bottom-right-radius:100%;
}
.leftoco{
  width:50px;
  height:50px;
  background:white;
  position:absolute;
  bottom:0;
  left:0;
  border-top-right-radius:100%;
}
.lefboco{
  width:50px;
  height:50px;
  background:white;
  position:absolute;
  bottom:0;
  right:0;
  border-top-left-radius:100%;
}

<div class="name">
  <div class="rithtopcorner"></div>
  <div class="riboco"></div>
  <div class="leftoco"></div>
  <div class="lefboco"></div>
</div>

You can use this to solve your problem

score 0 · Answer 2 · answered Nov 05 '18 at 19:22

Try this

.box {
   background-color: rosybrown;
    height: 160px;
    width: 110px;
    margin: 25px;
    padding: 20px;
    position: relative;
    overflow: hidden;
  
}
.box:before {
    content: "";
    display: block;
    background: #fff;
    position: absolute;
    top: -11px;
    left: -8px;
    width: 30px;
    height: 35px;
    border-radius: 20px;
}
.box:after{
    content: "";
    display: block;
    background: #fff;
    position: absolute;
    top: -11px;
    right: -8px;
    width: 30px;
    height: 35px;
    border-radius: 20px;
}

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

Div with cut corners

2 Answers2