英雄 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.