What is The Best Way To Add Triangle In Row Background?
Igors
Hi friends what is the best way to add triangle in row background?
I need to use in row two color bacground separated with horizontal triangle.
You can see picture.
Any help is apriciated.
I try to add this css and it works but it does not work in pagebuilder
.container { border:15px solid grey; white-space:nowrap; display: inline-block; }
.container > div {
display:inline-block;
width:10px;
border-width:20px;
border-left-width:14px;
vertical-align:middle;
border-style:solid none;
padding-right:14px;
}
.container > div:first-child { padding-right:17px; }
.container > div:last-child { padding-right:0; }
.container > div + div {
border-left-style: solid;
border-left-color: transparent;
margin-left:-14px;
}
.box1 { border-color: hsla(0,100%,50%,1.0); }
.box2 { border-color: hsla(40,100%,50%,1.0); }<div class="container">
<div class="box1"></div><div class="box2"></div>
</div>Thanks
Pavel
Accepted AnswerHi. Very simple trick. Configure the gradient background (colors position 50 /50 angle 90) of the section and add triangle-bg class in css class field.
Use the following code:
.triangle-bg {
overflow: hidden;
}
.triangle-bg::before {
content: '';
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 46%;
background-color: #7fb023;
transform: translate(-50%, -50%) rotate(45deg);
}This code creates a square turned on 45 degrees.
Set the values in the code as you need.
Pavel
Accepted AnswerNever use the .container selector in your HTML / CSS code, if you don't know exactly what you do. This is a reserved Bootstrap selector and overall generally accepted selector to build a global site layout. Using it in your code you will break the global layout.
Igors
Accepted AnswerPavel. You are the best, just briliant. Realy thanks.
I have not used sp pagebuilder and css more than a year.
