html - 边框 60 度而不是 45 度，背景颜色在 div 之外

Question

我无法向该 div 的左侧添加灰色。

<div class="full-width">
     <div class="footer-nav">
         <div class="footer-nav-left">
              <p class="text-center"> © Copyright 2016. All Rights Reserved </p>
         </div>
         <div class="footer-nav-right">
            Nav links here
         </div>
     </div>
</div>

请查看下面的链接以获取完整代码:

JS Fiddle

我需要的是:

Answer 1

60 度 Angular 需要不均匀的边界。

.footer-nav-left:after { /* note, now an 'after' */
  content: '';
  line-height: 0;
  font-size: 0;
  width: 0;
  height: 0;
  border-top: 80px solid gray;
  border-bottom: 0px solid transparent;
  border-left: 0px solid transparent;
  border-right: 40px solid transparent; /* half border-top */
  position: absolute;
  top: 0;
  left: 100%;
}

对于延伸到视口(viewport)左侧的灰色背景，使用另一个伪元素

.footer-nav-left:before {
  content: '';
  line-height: 0;
  font-size: 0;
  width: 50vw;
  height: 100%;
  background: inherit;
  position: absolute;
  top: 0;
  right: 100%;
}

body {
  margin: 0;
}
.full-width {
  background-color: black;
  overflow: hidden;
  /* no scroll bar */
}
.footer-nav {
  min-height: 80px;
  width: 480px;
  margin: 0 auto;
}
.footer-nav-left {
  background-color: gray;
  min-height: 80px;
  position: relative;
  float: left;
  color: #FFFFFF;
  z-index: 1001;
}
.footer-nav-left:before {
  content: '';
  line-height: 0;
  font-size: 0;
  width: 50vw;
  height: 100%;
  background: green;
  /* for demo purposes: use inherit for production */
  position: absolute;
  top: 0;
  right: 100%;
  z-index: -1;
}
.footer-nav-left:after {
  content: '';
  line-height: 0;
  font-size: 0;
  width: 0;
  height: 0;
  border-top: 80px solid gray;
  border-bottom: 0px solid transparent;
  border-left: 0px solid transparent;
  border-right: 40px solid transparent;
  position: absolute;
  top: 0;
  left: 100%;
}
.footer-nav-left p {
  margin-top: 30px;
  font-size: 15px;
}

<div class="full-width">
  <div class="footer-nav">
    <div class="footer-nav-left">
      <p class="text-center">© Copyright 2016. All Rights Reserved</p>
    </div>
    <div class="footer-nav-right">
      Nav links here
    </div>
  </div>
</div>

注意:倾斜的边框只起作用(和任何边框一样)，因为父元素的高度是已知。百分比宽度边框尚不可用。