Well, after a little investigation and looking for solutions I've achieved curved lines. But they aren't perfect as I want them .
The desired effect is this:
And this is the current effect:
I'm wondering if someone has a better solution for this or any solution that can achieve the desired effect.
Here's the code :
.left-corner-lines {
width: 252px;
float: left;
min-height: 40px;
position: relative;
}
.left-round-line {
border-radius: 0 0 0 100%;
border: 4px solid #fbbc56;
position: absolute;
top: 0;
right: -4px;
}
.left-round-line.yellow-round {
height: 12px;
width: 17px;
border-color: transparent transparent transparent #fbbc56;
}
.left-round-line.blue-round {
height: 21px;
width: 26px;
border-color: transparent transparent transparent #0090d0;
}
.left-round-line.purple-round {
height: 30px;
width: 35px;
border-color: transparent transparent transparent #915da3;
}
.left-round-line.pink-round {
height: 39px;
width: 44px;
border-color: transparent transparent transparent #cc5299;
}
.left-round-line.green-round {
height: 48px;
width: 53px;
border-color: transparent transparent transparent #bed140;
}
<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>
Here's the fiddle: http://jsfiddle.net/84t6w8ca/
The desired effect has to be possible to be recreated for the 4 directions possible.
But I only need one for now since I can recreate the others based on that.
I can do an image fallback for lower versions browsers, so don't worry about IE8
or less
Has anyone a better solution for this that can achieve it?
I desire a more rounded corner effect and not so circle ..
What I was thinking is going with overflow:hidden
square, and placing divs
inside of it with fixed border-radius
and bigger in width
and height
.
I should also warn you that the line is dynamic depending on content and going around the content till the end of the page. Also, it has lines coming from top and bottom. Like this:
After @0_o answer I tried to use box-shadows, but you can notice a little blur on it .
Example :
After using @NileshMahajan I've achieved the following:
I don't know if it's my eyes going crazy by now, but this is the nearest of what I was trying to achieve.
Answer: The different types of curves are Simple curve, Closed curve, Simple closed curve, Algebraic and Transcendental Curve.
The most common and prominent example of curved lines is the Alphabets- C and S. These letters of the alphabet are bent. In contrast, other letters like L, N, A, Z, and others are suitable examples of straight lines since they are neither curves but are joined segments of two or more consecutive lines.
Curved border in CSS can be done by border-radius property. Border-radius property removes the corners of the elements and replaces with a certain radius. Based on the given border-radius value curved border shape depends. Border-radius values can be in pixels or in percentage.
you can also use box-shadow to achieve this
.left-corner-lines {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.left-corner-lines:after {
content: '';
width: 30px;
height: 30px;
right: 0;
margin: -15px -15px 0 0;
border-radius: 50%;
position: absolute;
box-shadow: 0px 0px 0px 5px #fbbc56, 0px 0px 0px 10px #fff, 0px 0px 0px 15px #0090d0, 0px 0px 0px 20px #fff, 0px 0px 0px 25px #915da3, 0px 0px 0px 30px #fff, 0px 0px 0px 35px #cc5299;
}
<div class="left-corner-lines"></div>
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With