徽标问题/挑战 - Bootstrap 导航栏

Question

我被困在徽标的一小部分上，试图使用 Bootstrap 的导航栏做出一些不同的事情。我想要实现的是边框底部半径为 50px 的徽标！ （几乎是圆形的），所有其他角都是方形的。这里的问题是徽标 div 的左侧和底部被切割，因为在容器内部，试图将徽标放在容器外部，并使用媒体查询并试图达到我想要的效果，但到目前为止还没有.

有可能吗？我尝试将徽标放在导航栏外，并给它一个 10% 的 padding-left 以将徽标推到容器开始的位置，但我觉得这不是很好的技术。甚至尝试添加辅助div，并尝试填充

我在 Codepen 上做了一个小例子 - Example

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">

Answer 1

实际上有两件事：

1. 如果我理解正确，您还需要对左下角进行圆角处理。在这种情况下，您还需要添加border-bottom-left-radius: 50px;

2. 如果是这样，则引导程序添加到其导航栏品牌的负边距存在问题，因此您希望将其覆盖。

   .site-logo .navbar-brand {
       margin-left: 0 !important;  
   }
   

Here's the updated codepen（我把背景调成红色更好看）