css 斜梯形+图片 文章展示栏

一直想做个这样的展示栏（出自杀手：狙击），酷毙了有木有，查了半天最终还是css的polygon吸引了我，自定义多边形。
思路，俩div在一大div里，左右浮动，右边图片倒梯形即可。
成品

其余颜色可以自己调整（自己写）
代码：

<style>
.b {
      
    border: 1px solid black;
}
.b1{
      
    overflow: hidden; /*溢出自动换行*/
    white-space: normal;/*溢出自动换行*/
    word-break: break-all;/*溢出自动换行*/
    float: left;
    width: 50%;
}
.b2 img{
       /*图片*/
    width:300px;
    height:100px;
}
.b2 {
       
    clip-path: polygon(0 0, 100% 0, 100% 100%, 34% 100%); /* 图片梯形参数 */
    float: right;
}
.clflo{
       /* 清除浮动 */
    clear: both;
}
style>
<div class=b>
        <div class=b1>
            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        div>
        <div class=b2>
            <img src="./x.jpg">
        div>
        <div class=clflo>div>
    div>

必应每日一图