I have seen the following design on this facebook page.
I am not sure how the top corners are made, and i cannot imagine a way to implement this.
Can anyone provide an idea?
Thanks in advance.
2
-
you can use .div with border radius propertykhn Rzk– khn Rzk2021-04-10 09:00:23 +00:00Commented Apr 10, 2021 at 9:00
-
@RifkanRazak I have tried it but i can't get some smooth result!Manolis P.– Manolis P.2021-04-10 09:19:28 +00:00Commented Apr 10, 2021 at 9:19
Add a comment
|
2 Answers
Using mask spans can be a good solution.
.container {
background-color: #242B40;
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px;
display: flex;
align-content: center;
justify-content: center;
}
.navbar {
width: 80%;
display: block;
background: #fff;
position: relative;
height: 50px;
border-radius: 0 0 30px 30px;
}
.left-mask {
width: 42px;
height:55px;
background: #fff;
display: block;
position: absolute;
top: -17px;
left: -20px;
transform: rotate(-32deg);}
.left-mask:before {
width: 45px;
display: block;
background: #242B40;
height: 65px;
border-radius: 0px 20px 0px 0px;
margin-left: -34px;
content: ' ';
}<div class="container">
<div class="navbar">
<span class="left-mask"></span>
</div>
</div>
Comments
Simple example to get curve edges
.curve{
background-color:black;
width:100%;
height:20px;
border-bottom-left-radius:50% 50%;
border-bottom-right-radius:50% 50%;
background: #232323;
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.36);
}
.box {
width: 100%;
height: 45px;
background: #232323;
}<div class="box"></div>
<div class="curve"></div>
1 Comment
Manolis P.
I am not sure if this is what i wan't.
