时间戳

首页 > 解决方案 > CSS - 背景颜色的边框半径，线性渐变 50% 宽度

html - CSS - 背景颜色的边框半径，线性渐变 50% 宽度

问题描述

我有一个宽度为 50% 的背景

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

我希望它有一个border-radius但唯一的问题是边框半径对 100% 宽度的影响，而不是 50%

如果我添加，这是当前输出border-radius: 0px 120px 120px 0px

在此处输入图像描述

HTML 代码：

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

标签： htmlcss

解决方案

很难理解你想要什么，但现在我明白了。你需要创建另一个elemento，border-radius 改变div，而不是背景

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

推荐阅读