CODEWITHSUNDEEP
javascripthtmlcss
stig
stig

Reputation: 445

html/css3 - curved line

I need help to create a curved line with edges fading in css3/html5 like the image curved line

I have been looking at this example from codepen but the edges are not fading

.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>

Is it possible to do it?

Upvotes: 3

Views: 126

Answers (3)

Jishnu V S
Jishnu V S

Reputation: 8409

Just copy paste this on your HTML 

.box{
	width: 400px;
	height: 200px;
	background: #F98821;
	-moz-border-radius: 200px / 91px;
	-webkit-border-radius: 200px / 91px;
	border-radius: 200px / 91px;	
}

.box:before {
	content: '';
	width: 400px;
	height: 200px;
	background: #fff;
	-moz-border-radius: 193px / 70px;
	-webkit-border-radius: 193px / 70px;
	border-radius: 193px / 70px;
	top:13px;
	position: absolute;
}
<div class="box"></div>

Upvotes: 1

Redu
Redu

Reputation: 26161

Using viewport units are best for responsiveness

.holi {
  border-top: orange solid 5px;
  width: 50vw;
  margin: 0 auto;
  height: 14vh;
  border-radius: 25vw / 7vh;
}
<div class="holi">
</div>

Upvotes: 1

smalinux
smalinux

Reputation: 1152

Reference

.box{
	width: 400px;
	height: 200px;
	background: orange;
	-moz-border-radius: 200px / 100px;
	-webkit-border-radius: 200px / 100px;
	border-radius: 200px / 100px;	
}

.box:after {
	content: '';
	width: 400px;
	height: 200px;
	background: #fff;
	-moz-border-radius: 200px / 100px;
	-webkit-border-radius: 200px / 100px;
	border-radius: 200px / 100px;

	top:13px;
	position: absolute;
}
<div class="box"></div>

Upvotes: 0

Related Questions