用于创建折弯边框的边框宽度

Question

这是我在这个网站上挣扎的大约2个小时，知道如何创建像this website这样的部分 边框宽度不是图像？ 像这样的东西：

当我添加border-width:2000px;时  我在网站下面滚动。

    .shape-sormei {
    padding: 30px 0;
    border-right-width: 1366px;
    border-color: rgba(0, 0, 0, 0) #133747 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-style: solid dashed solid solid;

}
.bot_box{
    border-style: solid dashed solid solid;
    border-width: 0 2880px 60px 0;
    height: 0;
    width: 0;
}

任何解决方案？

Answer 1

他们之前使用空元素：

<div class="about_us_top top_box" style="border-left-width: 1280px;"></div>

并且样式如下：

.top_box {
    border-style: solid solid solid dashed;
    border-width: 60px 0 0 2880px;
}
.about_us_top {
    border-color: transparent transparent transparent #d44032;
}
.top_box, .bot_box {
    height: 0;
    width: 0;
}

在调整窗口大小时，内联样式border-left-width: 1280px;会随着javascript的变化而变化。

Answer 2

CSS3（现代浏览器）

<强> jsBin demo

要计算边框宽度而不是javascript，可以使用
来计算边框宽度 新CSS3单元 vw （视口宽度）。

  <div class="border top"></div>
  <div class="content">
    <h1>Content</h1>
  </div>
  <div class="border bottom"></div>

.border{
    border-width: 0 100vw 60px 0; /* Or use:  0 0 60px 100vw  to invert! */
    border-style: solid dashed;
}
.border.top{    border-color: #D44032 transparent; }
.border.bottom{ border-color: transparent #D44032; }

_{请注意，如果您想支持旧浏览器，则需要使用 JS获取文档宽度。}

---

使用JS：

为了使它与旧版浏览器兼容，这里有一个使用jQuery的例子 获得正确的边框宽度：

<强> jsBin DEMO with jQuery

jQuery(function( $ ){

  var $bord = $('.border');
  function setBordersWidth(){
    $bord.css("border-right-width", $(window).width() );
  }
  setBordersWidth(); // on DOM ready
  $(window).resize(setBordersWidth); // and on resize

});

CSS（注意我删除了vw）

.border{
    border-width: 0 0 60px 0; /* Or use: 0 0 60px 0   to invert! */
    border-style: solid dashed;
}
.border.top{    border-color: #D44032 transparent; }
.border.bottom{ border-color: transparent #D44032; }

Answer 3

试试 DEMO

<div class="serv_top top_box" style="border-left-width: 1280px;">df</div>

CSS

body{
   overflow-x: hidden;
}
.serv_top, .top_box{
border-width: 0 0 60px 2880px;
border-style: solid solid solid dashed;
border-color: transparent transparent #FF9900 transparent;
width:100%;
}