html - 使用 :before background? 反转边界半径

Question

我想使用背景做一个反转的边框半径，像这样:

这是我的代码:

.curved {
  background: #D3041E;
  height: 200px;
  width: 100%;
  position: relative;
}

.curved::before {
  content: '';
  border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 50% 100%;
  position: absolute;
  top: 0;
  width: 100%;
  background: #fff;
  height: 3%;
}

<div class="curved">
</div>

这是我目前得到的:

Answer 1

由于您无法很好地控制由边界半径制成的曲线，下一个最佳选择可能是使用 svg 绘制样条曲线。

为了这个例子，我用基本的贝塞尔曲线做了一个非常简单的路径。此处有更多详细信息:

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

坦率地说，我选择的路径可能与您的预期结果不完全匹配，无论如何，如果您找不到旨在使用边界魔法的解决方案并且想要考虑一个不同的选择。

我还添加了一个范围 slider 来显示如何实时改变曲线，请记住，这里我只有一个贝塞尔曲线控制点，我只是在 y 轴上移动。

const slider = document.querySelector('input[type=range]');
slider.addEventListener('input',(event)=>{
  changeCurve(event.target.value);
});

function changeCurve(y){
  const d = `M 0 0 Q 50 ${y} 100 0`;
  document.querySelector('.curved svg path')  
    .setAttribute('d', d);
}

.curved{ 
  background: #D3041E;
  height: 200px;
  position: relative;
  
  border: solid 8px black;
  border-top: none;
  margin: 1em;
}

.slider {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid;
}

input[type=range]{
  cursor: pointer;
  margin: 1em;
}

<div class="slider">
  <label>Change the curve:</label>
  <input  
    id="slider"
    type="range"
    value="50"
    min="0"
    max="100"
    step="1">
</div>

<div class="curved">
  <svg width="100%" viewBox="0 0 100 100">
    <path d="M 0 0 Q 50 5 100 0" fill="white" />  
  </svg>
</div>