如何使用Bootstrap在页面上设计这些形状？

Question

我正在尝试从PSD文档创建站点，但是我不知道如何在导航中创建这种形状。

这是一个大<div>，其中包含负margin-top和一些border-radius吗？

此外，如何使用引导程序在页面上实现此设计？就像div来自中心区域之外，而来自客户照片的“聊天气泡效果”。

Answer 1

第一个问题

border-bottom-left-radius: value;

border-bottom-right-radius: value;

关于第二个问题-这个问题不太清楚。

Answer 2

对于底部半径，您可以尝试以下代码：

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

Answer 3

您可以使用属性border-bottom-left-radius: value;和border-bottom-right-radius: value;在元素中创建圆角底部。以下是类似于您帖子中的屏幕截图的示例

.div-container {
  font-size:12px;
  width:220px;
  padding:5px 30px;
  background: #aaa;
  color: #222;
  border-bottom-left-radius:50px;
  border-bottom-right-radius:50px;
}
.div-right{
  padding:5px 30px 6px 30px;
  left:40px;
  display:inline;
  position:relative;
  background:#4286f4;
  color:white;

  border-bottom-left-radius:50px;
  border-bottom-right-radius:50px;
}

<div class = "div-container">
  916.543.1543
<div class = "div-right">
GET A FREE QUOTE
</div>
</div>