flex容器内重叠的三角形div

缬草

我正在尝试使用这样的 flex 容器和三角形 div 创建一个简单的对角分割标题:

在此处输入图像描述

在此处输入图像描述

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

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

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 和普通的 css,这是它​​不起作用的地方:

在此处输入图像描述

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

在此处输入图像描述

在这里您可以找到完整的代码(obv 它不会在 jsfiddle 中编译)。

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

卡梅伦

flex使用和:before重新创建图像的简单示例。

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章