我正在尝试使用这样的 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] 删除。
我来说两句