时间戳

首页 > 解决方案 > 如何创建具有线性渐变背景的直角三角形？

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

问题描述

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

我需要我的三角形有一个线性渐变背景，从左到右将橙色变成红色。我的三角形的周围必须是透明的。

标签： htmlcss

解决方案

我建议改用该clip-path属性，这样您就可以减少和清理标记并轻松使用 alinear-gradient作为背景

Codepen 演示

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

推荐阅读