CODEWITHSUNDEEP
htmlcss
Souvik Ray
Souvik Ray

Reputation: 3028

How to get a curved single stripe using CSS?

I want to get a curved stripe at the top right corner of the page. This is what I want to achieve

enter image description here

Now I know very basic of CSS and I am experimenting with the below code to get the desired result.

div {
  min-height: 100vh;
  background: linear-gradient(65deg, white 50%, #5C8F09 50%);
}

<div><div>

Another approach is using this

div {
  background: linear-gradient(135deg, #5cbcb0 5%, #ffffff 5%, #ffffff 15%, #5cbcb0 15%);
  /* Start #5cbcb0 from 0 and end at 5%, Start #fff at 5% and end at 15%, Start #5cbcb0 again at 15% and end at 100% */
  background-size: 593.97px 593.97px;
  background-repeat: no-repeat;
}

<div></div>

Ofcourse the above code is just experimental. My background is gray and I want a green line to pass over it in a fashion mentioned above.

Can anybody suggest me how this can be done?

Upvotes: 1

Views: 385

Answers (2)

Temani Afif
Temani Afif

Reputation: 273626

You can easily do it with CSS:

html {
  --b:20px; /*adjust this */
  height:100%;
  background:
    radial-gradient(farthest-side at top right,#0000 calc(100% - var(--b) - 1px), green calc(100% - var(--b)) 99%,#0000) 
    top 0 right -50px/ /* adjust here to control the position */
    200px 200px /* adjust both 200px and 200px to control the size */
    no-repeat;
}

For a non curved line simply use a linear-gradient:

html {
  --b:20px; /*adjust this */
  height:100%;
  background:
    linear-gradient(to bottom left,#0000 calc(50% - var(--b) - 1px), green calc(50% - var(--b)) 49.5%,#0000 50%) 
    top  right / 
    150px 200px /* adjust both 150px and 200px to control the size */
    no-repeat;
}

Upvotes: 1

nad
nad

Reputation: 1100

You could create a SVG curve (I've made the following one using Adobe Illustrator) and use CSS to position it.

#the-green-one {
  position: absolute;
  width: 200px;
  height: auto;
  top: -4px;
  right: -10px;
}

#the-green-one svg {
  display: block;
  width: 100%;
  height: 100%;
}
<div id="the-green-one">
  <!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In  -->
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="281.5px" height="473.4px" viewBox="0 0 281.5 473.4" style="overflow:visible;enable-background:new 0 0 281.5 473.4;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:url(#SVGID_1_);stroke-width:20;stroke-miterlimit:10;}
    .st1{fill:none;stroke:url(#SVGID_2_);stroke-width:20;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="236.6774" x2="281.4511" y2="236.6774">
    <stop  offset="0" style="stop-color:#079A7A"/>
    <stop  offset="1" style="stop-color:#019F9D"/>
</linearGradient>
<path class="st0" d="M9.8,2.2c13.5,60.6,37.5,139.1,82,223.9c58.8,111.9,130.1,190.5,182.9,240"/>
</svg>
</div>

Upvotes: 2

Related Questions