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

【问题标题】：Reproduce clip-path polygon for browsers not supporting it?为不支持它的浏览器重现剪辑路径多边形？
【发布时间】：2017-07-04 13:44:57
【问题描述】：

如何重现设计（见下文），以便不支持剪辑路径多边形的浏览器可以看到它？我希望它在不旋转的情况下倾斜顶部边缘或倾斜整个 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

【问题讨论】：

只是折腾想法：也许添加一个带有::before的div，然后给它一个巨大的border（查找CSS三角形/箭头）。或者也许有一个孩子div，在后台，你旋转。父 div 用overflow: hidden 截断左边或右边的部分。
@domdom 谢谢，我会调查一下。

标签： html css

【解决方案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>

【讨论】：

非常感谢。有点像我想要的那样工作。