與 CSS 不太一樣的六邊形邊框

Question

基本上我試圖在 CSS 中得到這個布局。 我有點工作模式，但我發現很難讓文本后面的白框響應並適用於所有屏幕尺寸。

 .info-container { margin-top: -50px; width: 100%; border-bottom: 100px solid #fff; border-right: 100px solid transparent; }.info-container h2 { position: absolute; left: 0; top: 10px; } /*.pl-0 is bootstrap class that gives padding-left: 0; */

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-mg-12"> <img src="http://placeimg.com/1000/480/any" /> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-8 pl-0"> <div class="info-container"> <h2>Meet our team</h2> </div> <p> Donec ultrices non lectus id dignissim. Pellentesque luctus justo dolor, ut vulputate tortor porttitor vel. Phasellus eget sollicitudin est. Praesent viverra, </p> </div> </div> </div>

Answer 1

試試這樣。

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-mg-12 skew_bg">
            <img src="http://placeimg.com/1000/480/any" />
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-8 pl-0">
            <div class="info-container">
                <h2>Meet our team</h2>
            </div>
            <p>
 Donec ultrices non lectus id dignissim. Pellentesque luctus justo dolor, ut vulputate tortor porttitor vel. Phasellus eget sollicitudin est. Praesent viverra, 
 </p>
        </div>
    </div>
</div>

CSS

info-container {
  margin-top: -50px;
  width: 100%;
  border-bottom: 100px solid #fff;
  border-right: 100px solid transparent;
}
.skew_bg{
position: relative;
overflow: hidden;
}
.skew_bg:before{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 50%;
background: #FFF;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(30deg, 0deg);
}
/* .pl-0 is bootstrap class that gives padding-left: 0; */

Answer 2

我在下面使用剪輯路徑為您做了一個示例。 由於瀏覽器的支持，我個人會考慮使用 svg（盡管我還看不到多邊形的問題）。 請參閱https://caniuse.com/#search=clip%20path如果您有任何問題，請盡情享受並告訴我：) 我還提供了其他幾個 css 技巧，這些技巧我多年來使用過很多次。

 body { margin: 0; padding: 0; box-sizing: border-box; }.hero-section { width: 100%; height: 100vh; min-height: 500px; background-image: url(http://placeimg.com/1000/480/any); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; }.shape-section { width: calc(100% - 5%); max-width: 500px; height: 40vh; min-height: 250px; background-color: white; position: absolute; bottom: 0; left: 0; clip-path: polygon(77% 5%, 100% 31%, 82% 100%, 0 100%, 0 0); display: flex; justify-content: center; align-items: center; flex-direction: column; }.title { margin-right: auto; max-width: 70%; margin-left: 24px; }.info { margin-right: auto; max-width: 70%; margin-left: 24px; }.cta-button { background-color: #FF5733; border-radius: 6px; border: 1px solid #900c3f; color: white; margin-right: auto; margin-left: 24px; transition: all.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); font-size: 16px; padding: 8px 30px; }.cta-button:hover { box-shadow: 0 3px 6px rgba(0,0,0,0.3); transform: translateY(-2px); cursor: pointer; }

 <div class="hero-section"> <div class="shape-section"> <h1 class="title">Meet out People</h1> <p class="info">Der dee herpderpsmer merp re herp derp derps. Ter mer merpus derp perp cerp le sherp? Ler se terp, mer nerpy.</p> <button class="cta-button">Do Stuff</button> </div> </div>

Answer 3

這是一個使用多個背景的想法：

 body { margin: 0; }.hero-section { height: 100vh; min-height: 500px; background-image: url(http://placeimg.com/1000/480/any); background-position: center; background-size: cover; position: relative; }.shape-section { width: calc(100% - 5%); max-width: 500px; height: 40vh; min-height: 250px; position: absolute; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; background: linear-gradient(to bottom right,white 49.5%,transparent 50%) bottom right/40px 60%, linear-gradient(to top right,white 49.5%,transparent 50%) top 20px right 0/40px calc(40% - 20px), linear-gradient(to top right,white 49.5%,transparent 50%) top left /calc(100% - 40px) 20px, linear-gradient(white,white) bottom left/calc(100% - 40px) calc(100% - 20px); background-repeat:no-repeat; }.title { margin-right: auto; max-width: 70%; margin-left: 24px; }.info { margin-right: auto; max-width: 70%; margin-left: 24px; }.cta-button { background-color: #FF5733; border-radius: 6px; border: 1px solid #900c3f; color: white; margin-right: auto; margin-left: 24px; transition: all.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); font-size: 16px; padding: 8px 30px; }.cta-button:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); transform: translateY(-2px); cursor: pointer; }

 <div class="hero-section"> <div class="shape-section"> <h1 class="title">Meet out People</h1> <p class="info">Der dee herpderpsmer merp re herp derp derps. Ter mer merpus derp perp cerp le sherp? Ler se terp, mer nerpy.</p> <button class="cta-button">Do Stuff</button> </div> </div>

為了更好地理解這個技巧，請使用不同的 colors 來查看謎題：

 body { margin: 0; }.hero-section { height: 100vh; min-height: 500px; background-image: url(http://placeimg.com/1000/480/any); background-position: center; background-size: cover; position: relative; }.shape-section { width: calc(100% - 5%); max-width: 500px; height: 40vh; min-height: 250px; position: absolute; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; background: linear-gradient(to bottom right,blue 49.5%,transparent 50%) bottom right/40px 60%, linear-gradient(to top right,green 49.5%,transparent 50%) top 20px right 0/40px calc(40% - 20px), linear-gradient(to top right,red 49.5%,transparent 50%) top left /calc(100% - 40px) 20px, linear-gradient(white,white) bottom left/calc(100% - 40px) calc(100% - 20px); background-repeat:no-repeat; }.title { margin-right: auto; max-width: 70%; margin-left: 24px; }.info { margin-right: auto; max-width: 70%; margin-left: 24px; }.cta-button { background-color: #FF5733; border-radius: 6px; border: 1px solid #900c3f; color: white; margin-right: auto; margin-left: 24px; transition: all.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); font-size: 16px; padding: 8px 30px; }.cta-button:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); transform: translateY(-2px); cursor: pointer; }

 <div class="hero-section"> <div class="shape-section"> <h1 class="title">Meet out People</h1> <p class="info">Der dee herpderpsmer merp re herp derp derps. Ter mer merpus derp perp cerp le sherp? Ler se terp, mer nerpy.</p> <button class="cta-button">Do Stuff</button> </div> </div>