Rounded CSS triangle upside down

Question

I found a code for creating a rounded triangle shape. I would like to rotate the whole triangle upside down to resemble the triangle-shaped mark that is usually used in dropdown-select elements.

 .triangle { position: relative; background-color: orange; } .triangle:before, .triangle:after { content: ''; position: absolute; background-color: inherit; } .triangle, .triangle:before, .triangle:after { /*width: 7px; height: 7px;*/ width: 30px; height: 30px; border-top-right-radius: 30%; } .triangle { transform: rotate(-60deg) skewX(-30deg) scale(1,.866); } .triangle:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); } .triangle:after { transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); } /* styles below for demonstration purposes only */ body { padding: 30px; } .triangle:hover { background: red; } .triangle:hover:before { background: blue; } .triangle:hover:after { background: green; } 

 <div class="triangle"></div> 

Also, here is CODEPEN: https://codepen.io/anon/pen/vdNKzX?editors=1100

The triangle in the code I found is made up by connecting 3 smaller pieces that represents different states of the same .triangle element ( :hover , :after and default).

.triangle , .triangle:before and .triangle:after are formed into desired shape by using transform property, that is a combination of rotate() , skew() , scale() and translate() functions.

The problem is I am not familiar with the usage of those functions. In fact I think the shape-forming process was done using some paid CSS generator, because I can't imagine anyone to know exactly what values should be inserted into those functions not by trial and error.

Answer 1

Just update the style class .triangle

.triangle {
    transform: skewX(-30deg) scale(1,.866);
}

 .triangle { position: relative; background-color: orange; } .triangle:before, .triangle:after { content: ''; position: absolute; background-color: inherit; } .triangle, .triangle:before, .triangle:after { /*width: 7px; height: 7px;*/ width: 30px; height: 30px; border-top-right-radius: 30%; } .triangle { transform: skewX(-30deg) scale(1, .866); } .triangle:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%); } .triangle:after { transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%); } /* styles below for demonstration purposes only */ body { padding: 30px; } .triangle:hover { background: red; } .triangle:hover:before { background: blue; } .triangle:hover:after { background: green; } 

 <div class="triangle"></div> 

Answer 2

By removing rotate attribute in the triangle class

 .triangle {
        transform: skewX(-30deg) scale(1,.866);
    }

Try out the snippet below

 .triangle { position: relative; background-color: orange; } .triangle:before, .triangle:after { content: ''; position: absolute; background-color: inherit; } .triangle, .triangle:before, .triangle:after { /*width: 7px; height: 7px;*/ width: 30px; height: 30px; border-top-right-radius: 30%; } .triangle { transform: skewX(-30deg) scale(1,.866); } .triangle:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); } .triangle:after { transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); } /* styles below for demonstration purposes only */ body { padding: 30px; } .triangle:hover { background: red; } .triangle:hover:before { background: blue; } .triangle:hover:after { background: green; } 

 <div class='triangle'></div> 

Answer 3

You can use 120deg instead of -60px . Means you want to rotate 180deg. -60 + 180 = 120.

transform: rotate(120deg) skewX(-30deg) scale(1,.866);