html - How do you achieve this round border seperation? -
i'm trying make page , i've tried border radius can't right. border becomes round , looks off when middle portion of div starts see effects of border radius.
pic below of want
how achieve this?
what have
<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 field </div> </div> </div>
css:
.image-container{ width: 100%; height: 100%; } .image-container img{ height: 100%; width: 100%; object-fit: cover; }
you have option use class , pseudo hide partially image:
.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 optionnal , buggy @ screen .. tiny gap shows image in between both shadows */ }
<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 field </div> </div> </div>
Comments
Post a Comment