问题：
css3如何实现这样的渐变背景色的梯形？
董翰墨
如图所示，可以用纯css3来实现吗
共有1个答案
颜安宁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变梯形</title>
<style>
.trapezoid {
display: inline-block;
width: 100px;
height: 100px;
background: linear-gradient(to right, blue, red);
clip-path: polygon(0 0, 100px 20px, 100px 80px, 0px 100px);
}
</style>
</head>
<body>
<div class="trapezoid"></div>
</body>
</html>
类似资料：
-
如图所示，渐变背景倾斜平铺
-
我想知道如何使背景渐变，这是在另一个J面板。在互联网上找到了许多文章，但他们都演示了如何覆盖J面板的画质组件（），而不是如何为它里面的j面板做。 我使用Netbean IDE。我创建了一个新的J面板类，可以覆盖它的画质组件（）。我在上面有另一个j面板（拖 这是我为父母尝试的方式。成功了。我怎样才能为子 jpanel 覆盖它？
-
本文向大家介绍android中实现背景图片颜色渐变方法，包括了android中实现背景图片颜色渐变方法的使用技巧和注意事项，需要的朋友参考一下 常用，记录一下。 效果图： 首先新建xml文件 bg_gradient.xml 在布局文件里面引用
-
问题内容： 我正在尝试在CSS上的缩略图上进行悬停过渡，以便在悬停时淡入背景渐变。过渡不起作用，但是如果我简单地将其更改为一个值，则可以正常工作。不支持渐变吗？我也尝试过使用图像，它也不会转换图像。 我知道这是有可能的，就像在另一篇文章中有人做的那样，但我不知道该怎么做。任何帮助>以下是一些可使用的CSS： 问题答案： 渐变尚不支持过渡（尽管当前规范说，它们应支持渐变，例如通过插值进行渐变过渡）。
-
渐变背景也是CSS3 的新特性，通过它可以在不使用图像的情况下，创建从一种颜色到另一种颜色的过渡。使用渐变的好处是，可以减少对图像的依赖，进而降低浏览网页时的带宽消耗，提高网站的访问速度。 渐变，就是两种或多种颜色之间的平滑过渡。在创建渐变时，可以指定多个中间颜色值，这些值称为色标。每个色标包含一种颜色和一个位置，浏览器自动从一个色标的颜色，平滑过渡到下一个色标的颜色。 在CSS3中，只需将 ba
-
中间的那个细条