How make a perfect curve with css?
This should work here you go :)
The website you gave uses .svg images to create this curve effect.
And with display: flex;
makes them inline.
<body>
<style>
* {
padding: 0;
margin: 0;
background: black;
}
.navbar {
display: flex;
}
</style>
<div class="navbar">
<div class="left">
<img src="https://techfest.org/2021/home/Navbar/Logo.svg">
</div>
<div class="right">
<img src="https://techfest.org/2021/home/Navbar/TN.svg">
</div>
</div>
</body>
Make a curve in Border using CSS
Use pseudo elements to produce the triangle.
We can give a border to the triangle by using both the before and after pseudo elements - which act as 2 triangles - an outer one - with a color the same as the border color and an inner one - with a slight offset - with a color the same as the background of the widget.
In the following example, the before pseudo element is the 'outer' triangle and the after pseudo elemnt is the 'inner' triangle.
Markup
<p class="triangle-border">This only needs one HTML element.</p>
CSS
.triangle-border {
position: relative;
background: #fff;
border: 1px solid #c2c2c2;
width: 200px;
padding: 15px;
margin: 20px;
border-radius: 3px;
box-shadow: 0 2px 9px rgba(0, 0, 0, .3);
}
.triangle-border:before {
content:"";
position: absolute;
top: -10px;
left: 46px;
border-width: 0 10px 10px;
border-style: solid;
border-color: #c2c2c2 rgba(0, 0, 0, 0);
display: block;
width: 0;
}
.triangle-border:after {
content:"";
position: absolute;
top: -8px;
left: 47px;
border-width: 0 9px 9px;
border-style: solid;
border-color: #FFF rgba(0, 0, 0, 0);
display: block;
width: 0;
}
FIDDLE
Source: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
There are also generators for this like:
http://ilikepixels.co.uk/drop/bubbler/
http://cssarrowplease.com
http://html-generator.weebly.com/css-speech-bubble-generator.html
Curved lines using border
Please check updated fiddle. https://jsfiddle.net/nileshmahaja/84t6w8ca/3/
I have added one container to the entire html
<div class="container">
<div class="left-corner-lines">
<div class="left-round-line yellow-round"></div>
<div class="left-round-line blue-round"></div>
<div class="left-round-line purple-round"></div>
<div class="left-round-line pink-round"></div>
<div class="left-round-line green-round"></div>
</div>
</div>
also modified your css code
.container{
position:relative;
width: 200px;
height: 200px;
overflow:hidden;
}
.left-corner-lines {
width: 200px;
left: 50%;
height: 200px;
position: relative;
top:-50%
}
.left-round-line {
border-radius:100%;
border: 5px solid #fbbc56;
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
.left-round-line.yellow-round {
height: 20px;
width: 20px;
border-color:#fbbc56;
}
.left-round-line.blue-round {
height: 40px;
width: 40px;
border-color: #0090d0;
}
.left-round-line.purple-round {
height: 60px;
width: 60px;
border-color: #915da3;
}
.left-round-line.pink-round {
height: 80px;
width: 80px;
border-color: #cc5299;
}
.left-round-line.green-round {
height: 100px;
width: 100px;
border-color: #bed140;
}
how to make css curve box with gradient & shadow
you just make is border-radius as like this
Css
div {
width:200px;
margin:auto;
margin-top:20px;
height:200px;
background:red;
border-radius:25px;
box-shadow: inset 0 0 15px rgba(68,68,68,0.8);;
position:relative;
}
div:beforae {
content:"";
position:absolute;
border-left:15px solid blue;
border-right:15px solid green;
height:200px;
border-radius:15px 0 0 15px;
}
HTML
<div></div>
and now check to live demo http://jsfiddle.net/rohitazad/Vsvg2/74/
Draw a curve with css
You could use an asymmetrical border to make curves with CSS.
border-radius: 50%/100px 100px 0 0;
VIEW DEMO
.box { width: 500px; height: 100px; border: solid 5px #000; border-color: #000 transparent transparent transparent; border-radius: 50%/100px 100px 0 0;}
<div class="box"></div>
Related Topics
Angular 6 Component Not Showing Up
How to Click a Button on a Website Using Puppeteer Without Any Class, Id ,... Assigned to It
Font-Size and Img Height Too Big At Website Through Smartphone Oneplus 3T
Add Line Break Within Tooltips
Maxlength Ignored for Input Type="Number" in Chrome
How to Set Width of Mat-Table Column in Angular
Are (Non-Void) Self-Closing Tags Valid in Html5
How to Reorder My Divs Using Only Css
Vertically Align an Image Inside a Div With Responsive Height
How to Pass Boolean Variable of False in a Url
How to Remove Indentation from an Unordered List Item
Open an Exe File Through a Link in a HTML File
Css Height 100% Is Not Always Equal to the Direct Parent
How to Set Textarea to 100% Width and Height
How to Switch Two Divs in HTML
How to Disable Browser Autocomplete on Web Form Field/Input Tags