如何设计V形Style的Diagonal Type DIV？

Question

如何设计 DIV 全宽的对角样式，但顶部和底部边框为 V 形。

注意：我已经尝试过许多可能的解决方案来设计与我提供的图像参考完全相同的设计，但我没有找到任何优化的解决方案。倾斜方法，顶部和底部 Div 分配一个中间的边框宽度（总共 3 Div 设置样式我试过但它只允许我塑造 div 的 2 个角但我不会找到任何可能的解决方案。

DIV CSS Shaping

这就是我要设计的东西。

在此先感谢您的帮助。

他是我试过的代码变体：

.tridiv{
 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%);*/
 }

.tridiv:before {
    content:"";
    -moz-transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
    transform: skewX(10deg);
    width: 90%;
    left: 0;
 right:0;
    height: 500px;
    background-color: #555;
    position: absolute;
    z-index: -1;
 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="">
            How do I draw a Diagonal div?
          </a>
        </p>
      </div>
    </div>

<div class="tridiv">
  <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

我不太擅长 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>

Answer 2

经过大量测试后，我找到了此问题的一个可能解决方案，我认为它可能会完美运行。

请检查代码，如果你们发现任何问题或错误，请尝试解决此问题。

.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{
 width:0;
 height:270px;
 border-top: 80px solid #fff;
 border-left: 50vw solid #0eaaee;
 border-right: 50vw solid #0eaaee;
 border-bottom:0;
}

/* Second DIV which work as Overlapping DIV*/
.seconddiv{
 width:0;
 height:130px;
 border-top: 80px solid #0eaaee;
 border-left: 50vw solid #fff;
 border-right: 50vw solid #fff;
 border-bottom:0;
 background:#fff
 
}
/* 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">
         <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>

如何设计V形Style的Diagonal Type DIV？

How to design Diagonal Type DIV with V shape Style?

html

css

border

shape

diagonal