如何设计V形款式的对角线型DIV？

Question

如何在对角线样式中设计具有全宽的DIV，但顶部具有V形的DIV &底部边框。

注意：我已经尝试了许多可能的解决方案来设计完全一样的图像参考我提供，但我没有找到任何优化解决方案。 倾斜方法，最&底部股利与一个中东（共3种事业部设置样式分配边框宽度我试过，但它让我只能用整形2角的格但我还是不会找到任何可能的解决方案。

DIV CSS Shaping

这是我想设计的东西

预先感谢帮助

他是我试过的代码变化：。

.tridiv{ 
 
\t width: 1170px; 
 
    margin: 0 auto; 
 
    background-color: #CCCCCC; 
 
    color: #000000; 
 
    height: 500px; 
 
    box-sizing: border-box; 
 
/*-webkit-clip-path: polygon(100% 0, 100% 71%, 50% 100%, 0 65%, 0 0, 51% 33%); 
 
clip-path: polygon(100% 0, 100% 71%, 50% 100%, 0 65%, 0 0, 51% 33%);*/ 
 
\t } 
 

 
.tridiv:before { 
 
    content:""; 
 
    -moz-transform: skewX(10deg); 
 
    -webkit-transform: skewX(10deg); 
 
    transform: skewX(10deg); 
 
    width: 90%; 
 
    left: 0; 
 
\t right:0; 
 
    height: 500px; 
 
    background-color: #555; 
 
    position: absolute; 
 
    z-index: -1; 
 
\t margin:0 auto 
 
} 
 

 

 
.box { 
 
    background-color: skyblue; 
 
    margin-top: 50px; 
 
    padding: 5% 20px; /* Added a percentage value for top/bottom padding to keep the wrapper inside of the parent */ 
 
    
 
    -webkit-transform: skewY(-5deg); 
 
    -moz-transform: skewY(-5deg); 
 
    -ms-transform: skewY(-5deg); 
 
    -o-transform: skewY(-5deg); 
 
    transform: skewY(-5deg); 
 
} 
 

 
.box > .wrapper { 
 
    -webkit-transform: skewY(5deg); 
 
    -moz-transform: skewY(5deg); 
 
    -ms-transform: skewY(5deg); 
 
    -o-transform: skewY(5deg); 
 
    transform: skewY(5deg); 
 
}

<div class="box"> 
 
     <div class="wrapper"> 
 
     <h1>This is a heading</h1> 
 
     <p>This is a sub-heading</p> 
 
     <p> 
 
      <a href="http://*.com/questions/22352311/how-do-i-draw-a-diagonal-div/22352383#22352383"> 
 
      How do I draw a Diagonal div? 
 
      </a> 
 
     </p> 
 
     </div> 
 
    </div> 
 

 
<div class="tridiv"> 
 
\t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu dapibus quam. Proin non faucibus nisi. Quisque ac mi lectus. Suspendisse metus purus, congue nec ornare eu, hendrerit vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas volutpat diam elementum lacus porta rhoncus. In hac habitasse platea dictumst. Aenean volutpat massa quis nulla elementum et commodo ligula fringilla. Sed pellentesque, risus eu rutrum volutpat, sem elit feugiat tellus, id molestie sapien turpis sit amet ante. Maecenas nec mollis orci. Integer lacus nulla, facilisis ac ullamcorper sit amet, commodo quis est. Quisque pharetra urna vitae leo suscipit vulputate luctus enim tincidunt. Curabitur blandit lobortis lobortis. Phasellus rhoncus arcu sed nunc tempus ut dictum tellus elementum.</p> 
 
</div>

Answer 1

大量的测试后，我发现这个问题的一个可能的解决方案，我认为这可能会很好地工作。

请检查代码，如果你们发现任何问题或错误，所以将尝试解决这个问题。使用

.wrapper{width:100%; margin:0 auto; background:#efefef; display:block; min-height:500px; box-sizing: border-box; position: relative; overflow: hidden;} 
 

 
/* First Div which work as Parent DIV */ 
 
.firstdiv{ 
 
\t width:0; 
 
\t height:270px; 
 
\t border-top: 80px solid #fff; 
 
\t border-left: 50vw solid #0eaaee; 
 
\t border-right: 50vw solid #0eaaee; 
 
\t border-bottom:0; 
 
} 
 

 
/* Second DIV which work as Overlapping DIV*/ 
 
.seconddiv{ 
 
\t width:0; 
 
\t height:130px; 
 
\t border-top: 80px solid #0eaaee; 
 
\t border-left: 50vw solid #fff; 
 
\t border-right: 50vw solid #fff; 
 
\t border-bottom:0; 
 
\t background:#fff 
 
\t 
 
} 
 
/* Content Section for Main Parent DIV Targetting with Content */ 
 
.content{position:relative; width:90%; margin:-235px auto auto auto; height:200px; color:#fff; font-family:Roboto Condensed; text-align:center} 
 
.content h1{font-size:46px;} 
 
.content p{ font-size:18px; line-height:28px;}

<div class="wrapper"> 
 
    <div class="firstdiv"> 
 
    </div> 
 
     <div class="content"> 
 
     \t <h1>Lorem ipsum dolor sit amet</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis turpis a lorem pellentesque placerat et nec libero. Proin vitae nulla eget est bibendum commodo vitae id orci. Nam et lacinia ex. Nullam eget condimentum diam, in ultricies nibh. Vestibulum scelerisque tempus eros quis bibendum. Maecenas at pulvinar libero. Fusce commodo leo non tempor facilisis.</p> 
 
     </div> 
 
    
 
    <div class="seconddiv"> 
 
    </div> 
 
</div>

Answer 2

我不是CSS太好，但作为一个概念证明，这里是表明你可以用::before，::after和transform做一个混乱的例子。

这有一个好处，transform比clip-path有更好的浏览器支持。一些调整（包括适当的数学）是最有可能的必要，但...

.container { 
 
    width: 600px; 
 
    height: 400px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.arrow-down::before, 
 
.arrow-down::after { 
 
    content: " "; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 400px; 
 
    height: 200px; 
 
    z-index: -10; 
 
    background: #5b9aff; 
 
} 
 

 
.arrow-down::before { 
 
    left: -60px; 
 
    transform: rotate(20deg); 
 
} 
 

 
.arrow-down::after { 
 
    left: 248px; 
 
    transform: rotate(-20deg); 
 
} 
 

 
.arrow-down { 
 
    position: relative; 
 
    text-align: center; 
 
    color: #fff; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 11pt; 
 
} 
 

 
.arrow-down h1 { 
 
    padding-top: 80px; 
 
}

<div class="container"> 
 
    <div class="arrow-down"> 
 
    <h1> 
 
Lorem Ipsum Dolor Sit Amet 
 
</h1> 
 
    <p> 
 
     Lorem Ipsum Dolor Sit Amet<br> 
 
     Yadda dadda, bleh foo bar<br> 
 
     Aww yeah, CSS is cool 
 
    </p> 
 
    </div> 
 
</div>