Background border radius with linear gradient

Question

I'm trying to make 2 background, as follow the image. I'm trying to do with linear-gradient and border radius, but I'm getting only a 90º border and don't know how to change the border.

Linear gradient width radius

here is the code

background-image: linear-gradient(left, #e3e3e3, #e3e3e3 30%, transparent 50%, transparent 100%), radial-gradient(circle at top left, #f00,#e3e3e3); background-image: -webkit-linear-gradient(left, #e3e3e3, #e3e3e3 30%, transparent 30%, transparent 100%); border-top-right-radius: 36px; border-bottom-right-radius: 36px;

Temani Afif · Accepted Answer · 2018-07-29 19:34:51Z

You can do it like this:

.box { padding:20px; display:inline-block; font-size:30px; background: linear-gradient(blue,blue) left/100px 100% no-repeat, radial-gradient(circle at left,blue 44%,transparent 45%) 100px 0/74px 74px no-repeat; }

<div class="box"> Some content here </div>

You can also introduce CSS variable for more control:

.box { padding:20px; display:inline-block; font-size:30px; background: linear-gradient(blue,blue) left/var(--p,50px) 100% no-repeat, radial-gradient(circle at left,blue 44%,transparent 45%) var(--p,50px) 0/74px 74px no-repeat; }

<div class="box"> Some content here </div> <div class="box" style="--p:20px"> Some content here </div> <div class="box" style="--p:150px"> Some content here </div>

Collectives™ on Stack Overflow

Background border radius with linear gradient

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related