react实现购物页面领取红包优惠 实现梯形盒子

效果：

红包

实现已领取所在的梯形盒子css：

html

css

 实现代码：

const [receive, setReceive] = useState(false)

<div style={{ width: "100%", height: "90px", lineHeight: "30px", marginBottom: "20px" }}>
    <p style={{ color: "rgb(153, 153, 153)" }}>红包</p>
    {/* 红包内部 */}
    <div style={{ width: "100%", height: "70px", backgroundColor: "rgb(250, 99, 100)", borderRadius: "6px" }}>
     <div style={{ width: "20%", height: "70px", display: "inline-block", float: "left" }}>
      <div style={{ width: "75%", height: "20px", backgroundColor: "rgb(251, 199, 46)", float: "left", borderRadius: "0 10px 10px 0", marginTop: "10%" }}>
        <p style={{ color: "#fff", float: "left", marginTop: "-10%", marginLeft: "20%" }}>红包</p>
      </div>
      <p style={{ color: "#fff", fontSize: "25px", float: "left", marginLeft: "20%" }}><span style={{ color: "#fff", fontSize: "10px" }}>￥</span>10</p>
       </div>
       <div style={{ width: "50%", height: "70px", display: "inline-block", float: "left", color: "rgb(242, 235, 235)", padding: "10px", lineHeight: "23px" }}>
          <span>满99可用</span><br />
          <span>2020.05.09-2020.06.18</span>
       </div>
       <div style={{ width: "30%", height: "70px", display: "inline-block", float: "left", color: "rgb(242, 235, 235)", padding: "13px" }}>
       {
          receive ? (
          <div className='trapezoid'>
          <span style={{ fontSize: "10px", float: "left", marginTop: "-15%", marginLeft: "22%" }}>已领取</span>
          </div>
          ) : (
          <Button round plain color='rgb(250, 99, 100)' style={{ height: "25px", width: "80px", fontSize: "12px" }} size='middle' onClick={() => setReceive(true)}>立即领取</Button>
          )
        }

        </div>
        </div>
        </div>