我想创建一个具有线性渐变背景颜色的直角三角形.是否可以使用CSS？
下面是我的具有单一背景颜色的直角三角形的代码.这里也可以使用相同的代码https://codepen.io/anon/pen/BMqVbL?editors=1100
<style>
body {
position: relative;
height: 100vh;
width: 100vw;
background: lightgrey;
}
.wrapper {
width: 760px;
height: 35px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.triangle {
border-right-width: 760px;
border-bottom-width: 35px;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-bottom-style: solid;
border-right-style: solid;
border-bottom-color: red;
border-right-color: transparent;
}
</style>
<body>
<div class="wrapper">
<div class="triangle"><!-- ### --></div>
</div>
</body>
我需要我的三角形有一个线性渐变背景,从左到右将橙色转换为红色.我的三角形周围必须是透明的.
我建议使用该clip-path属性,因此您可以减少和清理标记,并轻松使用a linear-gradient作为背景
.triangle {
display: block;
max-width: 760px;
height: 35px;
background: linear-gradient(to right, orange, red);
clip-path: polygon(0 0, 100% 100%, 0 100%)
}<span class="triangle"></span>作为旁注,我已经用它max-width代替width,只是为了向您展示如何使其响应.