弹性容器内的重叠三角形 div

Question

我正在尝试使用 flex 容器和三角形 div 创建一个简单的对角线分割 header，如下所示：

但由于某种原因它不起作用。

这是一个简化的工作示例：

function myFunction() {
  var e1 = document.getElementById("1");
  var e2 = document.getElementById("2");
  var els = document.getElementsByClassName("el");
  
  for (let el of els)
    el.classList.toggle("active");
  e1.classList.toggle("active");
  e2.classList.toggle("active"); 
}

button{
  width: 40px;
  height: 40px;
}

*{
  transition: all 0.3s ease-in-out;
}

body{
  background-color: #454545;
}

.el{
  width: 50px;
  height: 50px;
  background-color: blue;
}

.el:nth-of-type(1){
  background-color: red;
  
}

.el.active{
  background-color: #454545;
}

.flex{
  margin-top: 50px;
  margin-left: 50px;
  display: flex;
}

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  margin-left: 30px;
  border-style: solid;
  border-width: 50px 30px 0 0;
  border-color: red transparent transparent transparent;
}

.reversed-triangle {
  position: absolute;
  width: 0;
  height: 0;
  margin-left: 30px;
  border-style: solid;
  border-width: 0 0 50px 30px;
  border-color: transparent transparent blue transparent;
}

.triangle.active{
  border-color: #454545 transparent transparent transparent;
}

.reversed-triangle.active{
  border-color: transparent transparent #454545 transparent;
}

<button onClick="myFunction()"> Click!
</button>


<div class="flex">
  <div class="el active"> </div>
  <div class="triangle active" id="1" > </div>
  <div class="reversed-triangle" id="2"> </div>
  <div class="el"> </div>
</div>

它在 jsfiddle 中完美运行，但相同的布局在我的项目中不起作用。我正在使用 react 和 plain css，这是它不起作用的地方：

我无法让这两个元素都正常工作。如您所见，在上图中 right-hand h3 元素（我做过的事情）与左侧的黑色三角形重叠。如果我将 z-index: 1 添加到重叠三角形，当我单击另一个元素时，相反的三角形将重叠，如下所示：

Here 你可以找到完整的代码（obv 它不会在 jsfiddle 中编译）。

如果我忘了说什么请告诉我。非常感谢您的宝贵时间！

Answer 1

使用 flex 和 :before 到 re-create 您的图像的简单示例。

body {
  background-color: #565656;
}

.wrapper {
  width: 400px;
  margin: auto;
}

.full-width {
  background-color: #565656;
  border: solid #fff 1px;
}

.button {
  min-height: 80px;
  width: 100%;
  margin: 0 auto;
  display: flex;
}

.button-left {
  background-color: #fff;
  min-height: 80px;
  width: 38%;
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  z-index: 1001;
}

.button-right {
  width: 62%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1.7em;
  font-size: 1.5em;
  color: #fff;
}

.button-left:before {
  content: '';
  line-height: 0;
  font-size: 0;
  width: 0;
  height: 0;
  border-top: 80px solid white;
  border-bottom: 0px solid transparent;
  border-left: 0px solid transparent;
  border-right: 80px solid transparent;
  position: absolute;
  top: 0;
  right: -80px;
}

<div class="wrapper">
  <div class="full-width">
    <div class="button">
      <div class="button-left">
        <p>Me</p>
      </div>
      <div class="button-right">
        Things I've done
      </div>
    </div>
  </div>
</div>

弹性容器内的重叠三角形 div

Overlapping triangle div inside a flex container

css

flexbox

reactjs