Question

我想创建一个具有线性渐变背景色的直角三角形。可以使用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>

我需要我的三角形具有线性渐变背景，以将橙色从左到右转换为红色。我三角形的周围必须透明。

Answer 1

我建议改为使用clip-path属性，以便您可以减少和清除标记并轻松使用linear-gradient作为背景

Codepen demo

.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，只是向您展示了如何使其具有响应能力。

Answer 2

我认为您正在寻找border-image属性：

border-image: linear-gradient(to top right, orange, red 50%, transparent 51%, transparent);应该可以工作

演示解决方案：

.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;
    border-image: linear-gradient(to right top, orange, red 50%, transparent 51%, transparent);
}

<div class="wrapper">
  <div class="triangle"><!-- ### --></div>
</div>

Answer 3

您还可以考虑使用多个背景来创建三角形，但是没有透明度。诀窍是在渐变的顶部有一个与主背景颜色相同的三角形：

.triangle { 
  max-width: 300px;
  height: 50px;
  background: 
    linear-gradient(to top right,transparent 49%,#fff 50%),
    linear-gradient(to right, blue, red);
}

<div class="triangle"></div>

另一个具有偏斜变换和溢出的想法，您将在其中具有透明度：

.triangle { 
  max-width: 300px;
  height: 50px;
  overflow:hidden;
}
.triangle:before {
  content:"";
  display:block;
  height:100%;
  width:100%;
  background: linear-gradient(to right, blue, red);
  transform-origin:left;
  transform:skewY(10deg);
}

<div class="triangle"></div>

您还有SVG解决方案：

svg {
  width:300px;
}

<svg viewBox="0 0 300 100">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="blue" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <polygon points='0,0 300,100 0,100' fill="url(#grad)" />
</svg>

Answer 4

https://codepen.io/vaneetthakur/pen/jdepLx

我创建了直角三角形渐变背景颜色。

请检查下面的代码-

<div class="gradient-block"></div>

.gradient-block{
    width:200px;
    height:180px;
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 59%);
    clip-path: polygon(0 0, 0% 100%, 100% 59%);
    display:inline-block;
    background: #8c3310; /* Old browsers */
    background: -moz-linear-gradient(top, #8c3310 0%, #bf6e4e 100%); 
    background: -webkit-linear-gradient(top, #8c3310 0%,#bf6e4e 100%);
    background: linear-gradient(to bottom, #8c3310 0%,#bf6e4e 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c3310', endColorstr='#bf6e4e',GradientType=0 ); 
}

如何创建一个具有线性渐变背景的直角三角形？

4 个答案: