Question

我正在尝试创建一个这样的页面，我尝试了边界半径，但我无法做到正确。当div的中间部分开始看到边界半径的影响时，我的边框变得太圆并且总是看起来很偏。

下面我想要的图片

我将如何实现这一目标？

我有什么

<div class="container-fluid">
    <div class="row">
        <div class="hidden-xs col-sm-6" style="border: 1px solid black; height: 100vh; padding: 0px; background-color: white">
            <div class="image-container">
                <img src="http://cdn.homedsgn.com/wp-content/uploads/2011/12/Flyway-View-House-00-1.jpg">
            </div>
        </div>
        <div class="col-sm-6" style="border: 1px solid green; height: 100vh">
            sign up field
        </div>
    </div>
</div>

css：

.image-container{
    width: 100%;
    height: 100%;
}

.image-container img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

Answer 1

您还可以选择使用额外的类和伪来隐藏部分图像：

＆＃13;

.image-container{
    width: 100%;
    height: 100%;
}

.image-container img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.rounded {
  position:relative;
  overflow:hidden;
}
.rounded:before {
  content:'';
  position:absolute;
  top:-15vh;
  bottom:-15vh;
  right:0;
  width:30vw;
  border-radius:0 50% 50%  0/ 100%;
  box-shadow: 
      15vh 0 white, 
      inset -3px 0 2px white /* inset is optionnal and buggy at screen .. tiny gap shows image in between both shadows */
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class=" rounded hidden-xs col-sm-6" style="border: 1px solid black; height: 100vh; padding: 0px; background-color: white">
            <div class="image-container">
                <img src="http://cdn.homedsgn.com/wp-content/uploads/2011/12/Flyway-View-House-00-1.jpg">
            </div>
        </div>
        <div class="col-sm-6" style="border: 1px solid green; height: 100vh">
            sign up field
        </div>
    </div>
</div>

＆＃13;

Answer 2

你可以从这开始:)当然不同的浏览器有不同的边框css

        .image-container{
            width: 100%;
            height: 100%;
        }

        .image-container img{
            height: 100%;
            width: 800px;
            object-fit: cover;
            border-bottom-right-radius: 300px;
            border-top-right-radius: 323px;
        }
        
        .box{
        
            border: 1px solid green;
    width: 500px;
    background: white;
    height: 200px;
    display: inline-block;
    position: absolute;
    top: 190px;
    left: 90px;
        
        }

<div class="container-fluid">
    <div class="row">
        <div class="hidden-xs col-sm-6" style="border: 1px solid black; height: 100vh; padding: 0px; background-color: white">
            <div class="image-container">
                <img src="http://cdn.homedsgn.com/wp-content/uploads/2011/12/Flyway-View-House-00-1.jpg">
            </div>
        </div>
        <div class="col-sm-6 box" style="border: 1px solid green; height: 100vh">
            sign up field
        </div>
    </div>
</div>

你如何实现这个圆形边界分离？

2 个答案: