为不支持它的浏览器重现剪辑路径多边形？

Question

我如何重现设计（见下文），所以不支持剪辑路径多边形的浏览器可以看到它？我希望它能够在没有旋转的情况下调整顶部边缘  或倾斜整个div。这可能吗？

HTML：

<div class="angledbox">
    <div class="textstuff">
    <p class="title">Title</p>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada, turpis vitae hendrerit interdum, mauris augue viverra enim, id ultrices dui felis scelerisque ligula.</p>
    </div>
</div>

CSS：

.angledbox {
    background-color: #5EA359;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 20px;
  -webkit-clip-path: polygon(0 0, 6000px 100%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 6000px 100%, 100% 100%, 0 100%);
}
.title {
    font-size:30px;
    margin:0px;
    padding:0px;
    font-weight:bold;
    text-align:center;
    color:white;
    text-transform:uppercase;
}
.text {
    color:white;
    text-align:center;
    margin:0px;
    padding:0px;
    font-size: 18px;    
}
.textstuff {
    width:20%;
    margin:auto;
    padding-bottom:20px;
}

样本

Codepen

Answer 1

使用你的代码笔玩一下，我认为你不会使用边框三角形。

但也许这对你有所帮助。我使用线性渐变，大多数浏览器都可以处理。

.angledbox {
  position: relative;
  background-color: #5EA359;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 20px;
}

.angledbox::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  content: '';
  background-image: linear-gradient( to left bottom, white 50%, transparent 50%);
}

请在您的代码笔中添加/替换它。

或者这里有一个完整的例子：

.angledbox {
	position: relative;
	background-color: #5EA359;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 20px;
}

.angledbox::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 80px;
	content: '';
	background-image: linear-gradient( to left bottom, white 50%, transparent 50%);
}

.title {
	font-size:30px;
	margin:0px;
	padding:0px;
	font-weight:bold;
	text-align:center;
	color:white;
	text-transform:uppercase;
}
.text {
	color:white;
	text-align:center;
	margin:0px;
	padding:0px;
	font-size: 18px;	
}
.textstuff {
	width:20%;
	margin:auto;
	padding-bottom:20px;
}

<div class="angledbox">
	<div class="textstuff">
	<p class="title">Title</p>
	<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada, turpis vitae hendrerit interdum, mauris augue viverra enim, id ultrices dui felis scelerisque ligula.</p>
	</div>
</div>