I have used border-left and border-bottom to create a sort of one sided parallelogram shape for a bootstrap navbar, but I also need the right side to be curved while keeping the left side transparent.
Current outcome:
Wanted outcome:
I have tried using border-top-right-radius but nothing happens:
.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;
}
I have made a JSFiddle here: http://jsfiddle.net/6qfbhxty/
In your example the blue bar is the bottom border. It won't work because you can't give the "end" of the border a curved look.
You could try to apply the blue color as background and use :before
to create the triangle.
Please notice to apply the same color to the background and the border!
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;
}
<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="https://i.sstatic.net/wnFO2.png">
edited the snippet for better code