clip-path：黑色背景而不是透明

Question

我使用clip-path在我的一个div元素上生成一条小曲线

.nav
{
  -webkit-clip-path: polygon(0 6%, 50% 0%, 100% 5%, 100% 100%, 0 100%);
  clip-path: polygon(0 6%, 50% 0%, 100% 5%, 100% 100%, 0 100%);
}

如您所见，边框上有黑色背景，但我已将其设置为透明。如果我将颜色更改为红色，则黑色背景将为红色。我现在的问题是：我如何使用透明背景？

Answer 1

尝试使用clip-path

，而不是使用浏览器支持较少的pseud-elements

body {
  background: url('https://placeimg.com/500/500/any');
  background-size: cover;
}
.nav {
  width: 100%;
  height: 200px;
  position: relative;
  overflow:hidden;
  text-align:center;
  color:#fff;
  line-height:200px;
  font-size:26px;
}
.nav:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: -50%;
  top: 0;
  background: #00CCFF;
  transform-origin: 100% 100%;
  transform: rotate(5deg);
  z-index:-1;
}
.nav:before {
  position: absolute;
  content: "";
  width: 100%;
  height:100%;
  top:0;
  left: 50%;
  background: #00CCFF;
  transform-origin: 0% 100%;
  transform: rotate(-5deg);
  z-index:-1;
}

<div class="nav">Moin</div>

Answer 2

如果你想使用剪辑路径方法，你可以试试这个，

http://codepen.io/jinukurian7/pen/VvqROX

h1,

.description {

  text-align: center;

  margin: 5px 0;

}

/** The Clip Box **/

.content {

  position: absolute;

  margin: auto auto;

  top: 0;

  right: 0;

  bottom: 40px;

  left: 0;

  width: 500px;

  height: 100px;

  padding: 20px;

  background: #3498db;

  -webkit-clip-path: polygon(0 0, 50% 30px, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));

  clip-path: polygon(0 0, 50% 30px, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));

  -webkit-transition: all 200ms;

  transition: all 200ms;

}

<div class="content">
  <h2>Clip-Path Example</h2>
</div>