多节圆角块

Question

我该如何制作这种类型的部分。我已经尝试了很多，但没能做出适当的圆角。它需要顺利。

所需结果

这是我的代码

＆＃13;

＆＃13;

.section {
  height: 100px;
  position: relative;
  margin: 0 30px;
  margin-bottom: -5px;
}
.section:nth-child(odd):after {
  border-width: 5px 5px 5px 0;
}
.section:nth-child(even):before {
  border-width: 5px 0 5px 5px;
}
.section:before, .section:after {
  top: 0;
  bottom: 0;
  content: '';
  position: absolute;
}
.section:after {
  border: solid purple;
  border-width: 5px 0;
  width: 50%;
  right: 0;
  border-radius: 0 0 10px 0;
}
.section:before {
  border: solid orange;
  border-width: 5px 0;
  width: 50%;
  left: 0;
  border-radius: 10px 0 0;
}

＆＃13;

<div class="section">
    
</div>
<div class="section">
    
</div>
<div class="section">
    
</div>
<div class="section">
    
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以尝试这样：

.section {
  height: 100px;
  position: relative;
  margin: 0 30px;
  margin-bottom: -5px;
}
.section:nth-child(odd):after {
  content:"";
  position:absolute;
  right:0;
  height:20px;
  bottom:0;
  width:50%;
  border-right:2px solid blue;
  border-bottom:2px solid blue;
  border-radius:0 0 20px 0;
}
.section:nth-child(odd):before {
  content:"";
  position:absolute;
  left:0;
  height:20px;
  bottom:-20px;
  width:50%;
  border-left:2px solid green;
  border-top:2px solid green;
  border-radius:20px 0 0 0;
}

.section:nth-child(even):after {
  content:"";
  position:absolute;
  right:0;
  height:20px;
  bottom:-20px;
  width:50%;
  border-right:2px solid blue;
  border-top:2px solid blue;
  border-radius:0 20px 0 0;
}
.section:nth-child(even):before {
  content:"";
  position:absolute;
  left:0;
  height:20px;
  bottom:0;
  width:50%;
  border-left:2px solid green;
  border-bottom:2px solid green;
  border-radius: 0 0 0 20px;
}

<div class="section">
    
</div>
<div class="section">
    
</div>
<div class="section">
    
</div>
<div class="section">
    
</div>