CODEWITHSUNDEEP
htmlcsscss-transforms
user9254958
user9254958

Reputation:

Rounded CSS triangle upside down

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.

Upvotes: 2

Views: 925

Answers (3)

Kloker
Kloker

Reputation: 549

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>

Upvotes: 2

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4271

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>

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

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

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

Upvotes: 0

Related Questions