css如何设置梯形容器？

giegie们这种css样式该怎么做啊？左边为图片，右边为内容

你可以使用两个 div 元素来实现左边为图片，右边为内容的布局。

首先，在第一个 div 中使用 background-image 属性设置图片背景，并使用宽度和高度设置容器的大小。

第二个 div 元素中可以包含文本内容或其他元素，你可以使用 float 属性将它浮动到第一个 div 的右边。

这是一个示例代码：

```css
.container {
  position: relative;
  width: 600px;
  height: 400px;
}

.image {
  background-image: url(image.jpg);
  width: 200px;
  height: 400px;
  float: left;
}

.content {
  width: 400px;
  height: 400px;
  float: left;
}

```html
<div class="container">
  <div class="image"></div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Donec eget fermentum augue.
  </div>
</div>

这样就可以在浏览器中看到一个左边是图片，右边是内容的梯形容器了。

最基础思路实现：三个盒子，中间做斜线（要旋转角度）
源码链接：https://code.juejin.cn/pen/7184022673310089271

图示：

html

<div class="cont">
        <div class="left box">
        </div>
        <div class="line"></div>
        <div class="right box">
        </div>
    </div>

css

        *{
            box-sizing: border-box;
        }
        .cont{
            display: flex;
            position: relative;
            width: fit-content;
        }
        .box{
            width: 150px;
            height: 100px;
            border: 1px solid;
        }
        .line{
            position: absolute;
            top: -20px;
            left: 150px;
            height: 140px;
            border-right: 1px solid;
            transform: rotate(45deg);
        }
        .left{
            border-right: none;
        }
        .right{
            border-left: none;
        }

transform: rotate 让线旋转一下啦

三角形加正方形就出来了。三角形就是通过操作 border-left 上下左右实现的 。你可以试试