CODEWITHSUNDEEP
htmlcss
Qing Fei De Yi
Qing Fei De Yi

Reputation: 81

CSS - Border Radius on Background Color with linear gradient 50% width

I have a background with 50% width

background: linear-gradient(to right, #0009 50%, transparent 0);

I wanted it to have a border-radius but only problem is the border radius effects on the 100% width so instead of the 50%

This is the current output if I add border-radius: 0px 120px 120px 0px

enter image description here

HTML Code:

<div style="background: linear-gradient(to right, #0009 52%, transparent 0); border-radius: 0px 120px 120px 0px; border: 1px solid;">
  <div class="container">
    <div class="row">
      <div class="col-6" style="color: #fff; padding: 30px 30px 30px 0px;">
        <div style="font-size: 32px;">HELLO WORLD</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 964

Answers (3)

Maxwell s.c
Maxwell s.c

Reputation: 1668

Was hard to undestand what you want, but now i get it. You need to create another elemento, border-radius change the div, not the background

<div style="">
  <div style="background: red; width: 52%; background: #0009 52%; border-radius: 0px 120px 120px 0px; border: 1px solid;">
    <div class="container">
      <div class="row">
        <div class="col-6" style="color: #fff; padding: 30px 30px 30px 0px;">
          <div style="font-size: 32px;">HELLO WORLD</div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Tanmay Mitra
Tanmay Mitra

Reputation: 5

Do you need something like this?

<div style="background-color: white; border: 1px solid; height: 50px;">
  <div style="background-color: #0009; position: absoloute; top: 0; left: 0; width: 50%; height: 100%; border-radius: 0px 120px 120px 0px;">
    <span style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">Hello world</span>
  </div>
</div>

Upvotes: 0

Sahyog Vishwakarma
Sahyog Vishwakarma

Reputation: 410

I think you need this:

<!DOCTYPE html>
<html>
<head>
    <title>Anything You Like</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            border: 1px solid black;
            border-radius: 0px 120px 120px 0px;
        }
        #D01{
            font-size: 32px;
            background: linear-gradient(to right, #0009 100%, transparent 0);
            border-radius: 0px 120px 120px 0px;
            width:50%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="D01">HELLO WORLD</div>
    </div>
</body>
</html>

Upvotes: 1

Related Questions