transparent triangle with border - html

Question

Trying to create a transparent triangle div with a colored border.
css
#down {
display: block;
position: fixed;
left: 0; right: 0;
width: 0; height: 0;
margin: 0 auto;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
z-index: 20;
bottom: 0;
border-bottom: 55px solid rgba(250,250,250,0.75);
}
putting a div on-top another div ruins the transparency

Answer 1

You can also use gradients and/or transform:
on left: square + border-top/left + transform + gradient to draw the bottom border:
on middle : yours
on right : border-bottom + gradient for the triangle top borders
both extra example can hold content such as font icone / text / image .
body {
background:tomato;
}
#rotate {
position:fixed;
border:solid turquoise;
border-bottom:none;
border-right:none;
bottom:7px;
left:calc(50% - 180px);
height:75px;
width:75px;
transform-origin: bottom left;
transform:rotate(45deg);
background:linear-gradient(to bottom right, transparent calc(50% - 3px), turquoise calc(50% - 3px), turquoise 50%, transparent 50% );
}
#bg-gradient {
position:fixed;
bottom:5px;
left: calc(50% + 70px) ;
border-bottom:solid turquoise;
background:linear-gradient(to bottom right, transparent 50%, turquoise 50%, turquoise calc(50% + 3px), transparent calc(50% + 3px) ),linear-gradient(to bottom left, transparent 50%, turquoise 50%, turquoise calc(50% + 3px), transparent calc(50% + 3px) ) right
;
background-repeat:no-repeat;
background-size:50% 100%;
height:55px;
width:110px;
}
#down {
display: block;
position: fixed;
left: 0; right: 0;
width: 0; height: 0;
margin: 0 auto;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
z-index: 20;
bottom: 5px;
border-bottom: 55px solid rgba(250,250,250,0.75);
}
<div id="down"></div>
<div id="rotate"></div>
<div id="bg-gradient"></div>
Notice that a rotated square at bottom can have half being hidden

Answer 2

This is usually done with border tricks, and those are not really helpful for this
You need others techniques for that.
For instance, see this CSS
body {
background: linear-gradient(90deg, lightblue, yellow)
}
.trapezoid {
left: 50px;
top: 50px;
position: absolute;
height: 100px;
width: 500px;
background-color: transparent;
}
.trapezoid:before {
content: '';
width: 57%;
height: 100%;
left: -4%;
position: absolute;
border-color: red;
border-style: solid;
border-width: 3px 0px 3px 3px;
-webkit-transform: skewX(-20deg);
}
.trapezoid:after {
content: '';
width: 59%;
height: 100%;
right: -4%;
position: absolute;
border-color: red;
border-style: solid;
border-width: 3px 3px 3px 0px;
-webkit-transform: skewX(20deg);
}

Answer 3

This is a very easy solution, but it uses CSS transform which isn't supported by IE lower than 9.0.
Remember that this triangle is at the very bottom of the page, so a rotated square can be used.
#down {
display: block;
position: fixed;
left: 0; right: 0;
bottom: -47px;
width: 80px;
height: 80px;
margin: 0 auto;
border: 0;
z-index: 20;
background-color: rgba(250,250,250,0.75);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border: 3px solid #ffaa33;
}
#down-inner { /* Must be rotated back */
width: 100%;
height: 100%;
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
body {
background-color: #e7e7e7;
color: #444444;
font-family: Arial, sans-serif;
}
<div id="down">
<div id="down-inner">A rotated square</div>
</div>

Answer 4

I was able to resolve this with fewer lines of code.
body {
background: url(https://images.unsplash.com/photo-1500390365106-166bb67248d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2434&q=80) no-repeat top; background-size: cover;
min-height: 300px;
}
.triangle {
position: absolute;
top: 25%;
left: 30%;
height: 158px;
width: 182px;
background: white;
clip-path: polygon(50% 0%, 0% 100%, 1.75% 100%, 50% 3%, 97.5% 98.35%, 1.75% 98.35%, 1.75% 100%, 100% 100%);
}
<div class="triangle"></div>
The hexagon version is also shown here:
https://codepen.io/smeyer/pen/gOPmxqm
You can play with the numbers to alter the border width.