Question

我正在尝试复制具有背景图像的这种样式，另一方面，我在其div上具有正确的边框半径，但我做不到，我提供了以下选项来适应它们，但是我不能

div{
    position:relative;
    width:500px; height:200px;
    margin:0 auto;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    left:175px; top:25px;
    border-radius:100%;
    width:150px; height:150px;
    box-shadow: 0px 0px 0px 2000px #E3DFD2;
}

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg';

Background with radius-top inside

div {
    background:lightgreen;
    width:100%;
    height:200px;
    position:relative;
    text-align:center;
    padding:100px 0 0 0;
    box-sizing:border-box;
}
div:before {
    content:'';
    position:absolute;
    background:white;
    width:100%;
    height:100px;
    top:0;
    left:0;
    border-radius:40%;
    transform:translatey(-50%);
}

Answer 1

带有圆圈的剪切示例非常适合，您只需要使用DevTools / Inspector中的值即可。调整:before的高度/宽度以按照自己的喜好拉伸曲线，甚至弄乱边界半径的百分比，然后调整边界宽度以获取其周围的空间，top和left将其放置在边缘，然后使用父容器修剪右侧和底部区域。

.banner {
  background: url(https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg);
  background-size: cover;
}

.shape {
  position: relative;
  width: 170px;
  height: 440px;
  overflow: hidden;
}

.shape:after {
  content: '';
  position: absolute;
  left: -100px;
  top: -200px;
  border-radius: 100%;
  width: 151px;
  height: 440px;
  border: 200px solid #ffffff;
}

<div class="banner">
  <div class="shape">
  </div>
</div>

Answer 2

您可以通过clip-path属性来完成此操作。

注意：要求的最小宽度，否则形状将不会显示

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
display: flex;
}
.left{
  width: 10%;
}

.image {
  width: 90%;
  height: 400px;
  overflow: hidden;
  background: url(https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg);
  background-size: cover;
  clip-path: circle(100% at 100% 50%);

}

<div class="container">
  <div class="left">
  </div>
  <div class="image">
  </div>
</div>

具有边框半径的css图像

2 个答案: