如何使用CSS制作倾斜框

Question

如何制作可插入其他组件的此类盒子。在使用reactjs时 enter image description here

有人可以帮我吗？

Answer 1

我不确定您是否正在寻找这个东西。

<div id="chevron">
<p>write you content here</p>
</div>



#chevron {
      position: relative;
      text-align: center;
      padding: 12px;
      margin-bottom: 6px;
      height: 60px;
      width: 200px;
    }
    #chevron:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 51%;
      background: red;
      transform: skew(0deg, 6deg);
    }
    #chevron:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 50%;
      background: red;
      transform: skew(0deg, -6deg);
      z-index: 1;
    }
    #chevron p{
      color: #fff;
      position: absolute;
      width: 80%;
      z-index: 2;
    }

https://jsfiddle.net/L0tjrq3u/