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

Question

我被困在徽标的一小部分上，试图使用Bootstrap的导航栏制造不同的东西。我想要实现的是徽标的边框底部半径为50px！ （几乎四舍五入），其他所有角落都是正方形。这里的问题是标志div的左边和下边部分被切掉，因为它是在一个容器内部，试图将该标志放在容器外面，并且使用媒体查询并试图达到我想要的效果，但目前为止没有。

是可能的？我试图把这个标志放在导航栏外面，并给它一个10％的填充剩下的部分，以便将标志推到容器的起始位置，但我觉得不是那么好的技术。甚至试图加入第二格，并试图填补

我做了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（我做的红色背景，看看它更好）