I have come across numerous discussions on stack overflow regarding triangles, but most of them focus on small horizontal triangles which is not what I require.
What I'm looking for is a triangle that meets the following criteria:
- Vertical
- Full width
- Extending from left to right
- The left side should match the full height of its parent element
- Responsive
- Transparent above and below the triangle
After exploring various posts on Stack Overflow, I found two potential solutions:
Option 1: Responsive but lacks transparent top and bottom sections:
.element {
background-color:lightgreen;
border:1px solid black;
height:300px;
width:100%;
position:relative;
}
.overlay {
position:absolute;
height:100%;
width:100%;
background:
linear-gradient(
to top left,
black,
black 50%,
rgba(0,0,0,0) 50%,
rgba(0,0,0,0)) left center no-repeat,linear-gradient(
to bottom left,
black,
black 50%,
#007bff 50%,
#007bff
) left center no-repeat;
background-size:200% 100%;
}<div class="element">
<div class="overlay"></div>
</div>The background is currently black, changing it to transparent would cause issues as the blue color would show through.
Option 2: Transparent but lacks responsiveness:
.element {
background-color:lightgreen;
border:1px solid black;
height:300px;
width:100%;
position:relative;
}
.overlay2 {
background-color:transparent;
width: 100%;
height:auto;
border-left: solid 700px rgb(255,255,255);
border-bottom: solid 150px transparent;
border-top: solid 150px transparent;
}<div class="element">
<div class="overlay2"></div>
</div>The issue here lies with setting a specific pixel size for the border, making it non-responsive and unsuitable for my needs.
Is there a way to achieve what I'm looking for without resorting to JavaScript?