左边黑色部分是一张图片，右边是文字展示，请问这种布局用css要怎么做呢
你可以参考一下这个例子：
<div style="border-bottom: 20px solid red;border-right: 2px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 0px;float:left;clear:left;margin-right:30px;"></div>
<div style="border-bottom: 20px solid red;border-right: 4px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 2px;float:left;clear:left;margin-right:30px;"></div>
<div style="border-bottom: 20px solid red;border-right: 6px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 6px;float:left;clear:left;margin-right:30px;"></div>
<div style="border-bottom: 20px solid red;border-right: 8px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 12px;float:left;clear:left;margin-right:30px;"></div>
<div style="border-bottom: 20px solid red;border-right: 10px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 20px;float:left;clear:left;margin-right:30px;"></div>
<div style="border-bottom: 20px solid red;border-right: 12px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 30px;float:left;clear:left;margin-right:30px;"></div>
<div style="border-bottom: 20px solid red;border-right: 14px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 42px;float:left;clear:left;margin-right:30px;"></div>
<div style="border-bottom: 20px solid red;border-right: 16px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 56px;float:left;clear:left;margin-right:30px;"></div>
<div style="border-bottom: 20px solid red;border-right: 18px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 72px;float:left;clear:left;margin-right:30px;"></div>
<div style="border-bottom: 20px solid red;border-right: 20px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 90px;float:left;clear:left;margin-right:30px;"></div>
<div style="border-bottom: 18px solid red;border-right: 20px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 110px;float:left;clear:left;margin-right:30px;"></div>
<div style="border-bottom: 16px solid red;border-right: 20px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 130px;float:left;clear:left;margin-right:30px;"></div>
<div style="border-bottom: 14px solid red;border-right: 20px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 150px;float:left;clear:left;margin-right:40px;"></div>
<div style="border-bottom: 12px solid red;border-right: 20px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 170px;float:left;clear:left;margin-right:60px;"></div>
<div style="border-bottom: 10px solid red;border-right: 20px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 190px;float:left;clear:left;margin-right:80px;"></div>
<div style="border-bottom: 8px solid red;border-right: 20px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 210px;float:left;clear:left;margin-right:80px;"></div>
<div style="border-bottom: 6px solid red;border-right: 20px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 230px;float:left;clear:left;margin-right:80px;"></div>
<div style="border-bottom: 4px solid red;border-right: 20px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 250px;float:left;clear:left;margin-right:80px;"></div>
<div style="border-bottom: 2px solid red;border-right: 20px solid #f6f6f6;font-size: 0px; line-height: 0%; width: 270px;float:left;clear:left;margin-right:80px;"></div>
<p>Here, the text flows along the edge of the curve in all browsers that can handle borders properly.</p>
<p>Many browsers will float the curve too close to the text so some of the text covers it. To compensate I have included
a margin-right style on each div element that increases in lower lines.</p>
<p>Take this for example.</p>
<p>Each line of text floats further and further to the right as is flows down the edge. Most browsers only consider the
top-left corner of the text when positioning against the margin, so sharp slopes may still show the problem. Opera
considers all parts of the text, so it does not suffer from this.</p>
<p style="clear:left;">Using clear, you can place content under the slope, and guarantee it will always be under it, no
matter how wide the window gets.</p>