css - 两个块之间的边界半径

如何在此演示中创建边框

我尝试创建类似这样的东西，但找不到方法如何像演示中一样更改两个块之间的边界。
我的例子在这里：

.title {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background-color: #F9B700;
  max-width: 330px;
  margin-right: auto;
  padding: 7px 5px;
}

.left,
.right {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  box-sizing: border-box;
}

.left {
  width: 40%;
}

.right {
  width: 60%;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid #000;
  padding: 20px;
  border-bottom: 1px solid transparent;
  background-color: #fff;
}

.content {
  border: 1px solid #000;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  margin-top: -1px;
  padding: 10px;
}

<div class="block-wrapper">
  <div class="left">
    <div class="title">Création de site e-commerce à Nantes</div>
  </div><div class="right"></div>
  <div class="content">Doter votre commerce en ligne de solutions performantes est un impératif pour vous démarquer de vos concurrents. Cela passe par le déploiement des outils adéquats pour le fonctionnement de votre site web</div>
</div>

最佳答案

您可以尝试使用伪元素，如下所示：

.title {
  border-radius: 10px;
  background-color: #F9B700;
  width:40%;
  padding: 7px 5px;
}

.content {
  border: 1px solid #000;
  border-top:none;
  border-right:none;
  border-top-left-radius: 10px;
  padding: 10px;
  margin-top: 10px;
  position:relative;
}
.content:before {
  content:"";
  position:absolute;
  bottom:100%;
  left:9px;
  width:42%;
  height:30px;
  border-bottom:1px solid;
  border-right:1px solid;
  border-bottom-right-radius: 10px;
}
.content:after {
  content:"";
  position:absolute;
  bottom:0;
  height:calc(100% + 38px);
  right:0;
  width:calc(58% - 10px);
  border-top:1px solid;
  border-right:1px solid;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

<div class="block-wrapper">
  <div class="title">Création de site e-commerce à Nantes</div>
  <div class="content">Doter votre commerce en ligne de solutions performantes est un impératif pour vous démarquer de vos concurrents. Cela passe par le déploiement des outils adéquats pour le fonctionnement de votre site web</div>
</div>