徽标问题/挑战 - Bootstrap Navbar

Question

我被困在徽标的一小部分上，尝试使用Bootstrap的导航栏制作不同的东西。我想要实现的是边界底部半径为50px的徽标！ （几乎圆润），所有其他角落方形。这里的问题是logo div的左下角是切割的，因为它是在容器内部，试图将徽标放在容器外面，然后玩媒体查询并试图达到我想要的效果，但到目前为止还没有。

有可能吗？我尝试将徽标放在导航栏外面，然后给它一个10％的填充物，将徽标推到容器开始处，但我觉得这不是一个好技术。甚至尝试添加辅助div，并尝试填写

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

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

Answer 1

实际上有两件事：

1. 如果我理解得对，你需要左下角也是圆角。在这种情况下，您还需要添加border-bottom-left-radius: 50px;

2. 如果是这样，引导程序添加到其navbar-brand的负边距就会出现问题，因此您希望覆盖它。

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

Here's the updated codepen（我将背景设为红色以便更好地查看）