css 实现梯形 带效果图

以下是一种实现梯形的 CSS 代码，带有效果图展示：

.trapezoid {
  width: 200px;
  height: 0;
  border-bottom: 100px solid blue;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  transform: skewX(-30deg);
  margin: 50px;
  transition: all 0.5s ease-in-out;
}

.trapezoid:hover {
  border-bottom: 150px solid blue;
}

效果图如下所示：


这段 CSS 代码创建了一个梯形，它的底部宽度为 200 像素，高度为 100 像素，颜色为蓝色。左右两侧的边框宽度为 50 像素，颜色为透明。`transform: skewX(-30deg)` 将矩形形变为梯形。`margin: 50px` 将梯形从顶部和左侧移动了 50 像素。`transition: all 0.5s ease-in-out` 添加了一个过渡效果，当鼠标悬停在梯形上时，梯形的高度将从 100 像素增加到 150 像素。

相关问题

css 实现梯形l两边凹凸梯形效果

可以使用 CSS 的伪元素和 transform 属性来实现梯形两边凹凸效果。

HTML 结构：

<div class="trapezoid"></div>

CSS 样式：

.trapezoid {
  position: relative;
  width: 200px;
  height: 80px;
  background-color: #333;
  transform: skew(-10deg); /* 将元素倾斜10度 */
}

.trapezoid::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
  width: 20px;
  height: 80px;
  background-color: #333;
  transform: skew(10deg); /* 将伪元素倾斜10度 */
}

.trapezoid::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 20px;
  height: 80px;
  background-color: #333;
  transform: skew(-10deg); /* 将伪元素倾斜-10度 */
}

以上代码会生成一个宽度为 200px，高度为 80px 的黑色梯形，两侧各有一个凹凸的梯形。可以根据需要调整宽高和颜色。

css实现图片翻转效果

要实现图片翻转效果可以使用CSS3的transform属性。首先设置要翻转的图片的父元素为perspective属性，然后使用rotateY属性来完成翻转。比如，可以使用以下代码来实现一个鼠标悬浮翻转的效果：

HTML代码：

<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="image.jpg">
</div>
<div class="back">
<img src="image-back.jpg">
</div>
</div>
</div>

CSS代码：

.flip-container {
perspective: 1000px;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
position: relative;
transform-style: preserve-3d;
transition: 0.6s;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.back {
transform: rotateY(180deg);
}