英雄 slider 上的列之间有斜边的行
[英]Row with oblique border between columns on hero slider
问题描述
我目前正在处理我的应用程序的登录页面。 我想用我画的这个草图做一些类似的东西： https://imgur.com/DCi5ueM
“OR”的圆形边框不是必须的，我现在更关注斜的。
有没有办法通过 CSS 甚至其他方法来实现它？
到目前为止，我已经使用 owlCarousel 制作了英雄部分、列布局和 slider，但我一直坚持制作那条斜线。 我已经看过一些教程，并尝试调整它们以满足我的需求，但无法做到。
<div class="hc-item row w-100 p-0 m-0">
<div class="col-md-5 left-column">
<div class="content">
<h2 class="text-center">Lorem ipsum dolor.</h2>
<button class="btn btn-outline-warning d-flex mx-auto">View more</button>
</div>
</div>
<div class="col-md-2 my-auto divider-column">
<h2 class="text-center">OR</h2>
</div>
<div class="col-md-5 right-column">
<div class="content">
<h2 class="text-center">Lorem ipsum dolor.</h2>
<button class="btn btn-outline-warning d-flex mx-auto">View more</button>
</div>
</div>
</div>
.hc-item {
min-height: 100vh;
height: 100vh;
background: wheat;
}
.left-column {
background-image: url('https://images.pexels.com/photos/6021588/pexels-photo-6021588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
}
.right-column {
background-image: url('https://images.pexels.com/photos/33041/antelope-canyon-lower-canyon-arizona.jpg?auto=compress&cs=tinysrgb&h=650&w=940');
}
.left-column .content {
position: absolute;
top: 5%;
left: 10%;
}
.right-column .content {
position: absolute;
bottom: 5%;
right: 10%;
}
.left-column, .right-column {
overflow: hidden;
margin: 0;
padding: 0;
object-fit: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
这是我到目前为止所完成的工作的一个 jsfiddle： https://jsfiddle.net/8sLaqjb1/
我不知道如何使边框倾斜以及使图像尽可能宽（我猜顶部和底部的宽度不同）
1 个解决方案
解决方案1
0 2021-01-02 19:12:14
我和你的 Fiddle 玩了一点，这是一个有趣的挑战。 我所做的可能并不完美……但这是一个开始。
在 HTML 标记中，我从.divider-column div 中删除了col-md-2 my-auto类。 我还制作了倾斜图像的.content divs 兄弟姐妹。
我在您的 CSS 中进行了很多更改，其中主要更改是关于使用transform: skew()和transform: translate() 。
$(document).ready(function() { var owl; owl = $('.home-carousel').owlCarousel({ loop: true, margin: 0, nav: false, dots: false, autoplay: true, autoplayTimeout: 7500, smartSpeed: 750, items: 1 }); // Reset timer on action owl.on('changed.owl.carousel', function(e) { owl.trigger('stop.owl.autoplay'); owl.trigger('play.owl.autoplay'); }); });
body { margin: 0; padding: 0; box-sizing: border-box; background-color: #121212; color: #FFFFFF; min-height: 200vh; }.hc-item { min-height: 100vh; height: 100vh; background: black /*wheat;*/ /* CHANGED */ }.left-column { background-image: url('https://images.pexels.com/photos/6021588/pexels-photo-6021588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'); /* ADDED */ transform: skew(0,-40deg) translateY(-150vh); height: 200vh; }.right-column { background-image: url('https://images.pexels.com/photos/33041/antelope-canyon-lower-canyon-arizona.jpg?auto=compress&cs=tinysrgb&h=650&w=940'); /* ADDED */ transform: skew(0,-40deg) translateY(-150vh) translateY(6px); height: 200vh; } /* CHANGED */.left-content { position: fixed; top: 13vh; left: 4%; } /* CHANGED */.right-content { position: fixed; bottom: 10vh; right: 2%; }.left-column, .right-column { overflow: hidden; margin: 0; padding: 0; object-fit: cover; background-size: cover; background-position: center; background-repeat: no-repeat; } /* ADDED */.divider-column h2{ position: absolute; z-index: 10; box-sizing: border-box; top: calc(50vh - 1rem - 8px - 0.3em); left: calc(50vw - 1rem - 8px - 0.3em); border-radius: 100%; border: 4px solid black; padding: 0.3em; background: white; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>trIP Records</title> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min:css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" /> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min:css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" /> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" /> </head> <body> <section> <div class="owl-carousel owl-theme home-carousel"> <div class="hc-item row w-100 p-0 m-0"> <div class="col-md-5 left-column"></div> <div class="left-content"> <h2 class="text-center">Lorem ipsum dolor.</h2> <button class="btn btn-outline-warning d-flex mx-auto">View more</button> </div> <div class="divider-column"> <h2 class="text-center">OR</h2> </div> <div class="col-md-5 right-column"></div> <div class="right-content"> <h2 class="text-center">Lorem ipsum dolor:</h2> <button class="btn btn-outline-warning d-flex mx-auto">View more</button> </div> </div> </div> </section> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min:js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min:js" integrity="sha512-8qmis31OQi6hIRgvkht0s6mCOittjMa9GMqtK9hes5iEQBQE/Ca6yGE5FsW36vyipGoWQswBj/QBm2JR086Rkw==" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script> </body> </html>
上面片段中的结果是马马虎虎......最好是检查小提琴并尝试调整大小......
形状为div的斜底边框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.