CSS - 使用border-left和border-bottom后的Curved Corner

Question

我使用border-left和border-bottom为bootstrap导航栏创建一种单面平行四​​边形形状，但我还需要右侧弯曲，同时保持左侧透明。

目前的结果：

通缉结果：

我尝试过使用border-top-right-radius但没有任何反应：

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    height: 20px;
    width: 100px;
    border-bottom: 50px solid rgba(58, 162, 178, 0.5);
    border-left: 50px solid transparent;

    /* Tried */
    border-top-right-radius: 2em;
}

我在这里制作了一个JSFiddle：http://jsfiddle.net/6qfbhxty/

Answer 1

在您的示例中，蓝色条是底部边框。它不会起作用，因为你无法给出结束＆＃34;边框是弯曲的外观。

您可以尝试将蓝色应用为背景，并使用:before创建三角形。

请注意在背景和边框上应用相同的颜色！

＆＃13;

＆＃13;

body {
  background-image: url("http://lorempixel.com/800/800/abstract");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.navbar {
  position: relative;
  height: 50px;
  margin: 0px 0px 20px 50px;
  width: 100px;
  background: rgba(58, 162, 178, 0.8);
  border-top-right-radius: 16px 25px;
  border-bottom-right-radius: 16px 25px;
}
.navbar:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -50px;
  border: solid transparent;
  border-width: 0 0 50px 50px;
  border-bottom-color: rgba(58, 162, 178, 0.8);
}
h3 {
  background: white;
}

＆＃13;

<div class="navbar" style="width:75%;">
  <div class="navbar-collapse collapse navbar-responsive-collapse"></div>
  <br>
  <br>
  <br>
  <h3>Wanted outcome (shape wise):</h3>

  <img src="http://i.stack.imgur.com/wnFO2.png">

＆＃13;

＆＃13;

＆＃13;

编辑了代码段以获得更好的代码

Answer 2

将此添加到您的css以获得弯曲的右侧：

    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;