transparent triangle with border

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