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: 
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](http://codepen.io/gc-nomade/pen/pyQjyq) such as font icone / text / image .

```css
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); 
}
```

```html
<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
I was able to resolve this with fewer lines of code.

```css
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%);
}
```

```html
<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.