带拐角的div

Question

有人可以帮助/指导我进行这样的设计吗？我尝试了许多解决方案，但未成功。

Answer 1

.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>

您可以使用它来解决您的问题

Answer 2

尝试一下

.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>