边框为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度角需要不均匀的边框。

.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%;
}

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

.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>

注意：有角度的边框只能起作用（如同），因为父级的高度是已知。宽度边界百分比尚不可能。

Answer 2

喜欢这个吗？

新css：

.footer-nav{
    min-height: 80px;
    width:100%; // <-- changed
    margin:0 auto;
}

.footer-nav-left p{
    margin-top: 30px;
    font-size:15px;
    margin-left: 80px; // <-- changed
}

Updated fiddle

Answer 3

不确定您的边境问题;

.footer-nav-left p{
    margin-top: 30px;
    font-size:15px;
    margin-left:80px;
}

.footer-nav{
    min-height: 80px;
    width:960px;
    margin:0 auto;
    position:relative;
}

.footer-nav-left{
    background-color:gray;
    min-height:80px;
    position: absolute;
    left:0;
    color:#FFFFFF;
    z-index:1001;
}