倒置圆角 CSS 三角形

Question

我找到了创建圆角三角形的代码。我想将整个三角形倒置旋转，以类似于下拉选择元素中通常使用的三角形标记。

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

另外，这里是 CODEPEN：https://codepen.io/anon/pen/vdNKzX?editors=1100

我发现的代码中的三角形是由 3 个较小的部分组成的，这些部分代表同一 .triangle 元素（:hover、:after 和默认值）的不同状态。

.triangle、.triangle:before 和 .triangle:after 使用transform 属性形成所需的形状，即rotate()、skew()、scale() 和translate() 函数的组合。

问题是我不熟悉这些函数的用法。事实上，我认为形状形成过程是使用一些付费的 CSS 生成器完成的，因为我无法想象有人不通过反复试验就能确切地知道应该将哪些值插入到这些函数中。

Answer 1

只需更新样式类 .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

通过删除三角形类中的旋转属性

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

试试下面的sn-p

.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

您可以使用120deg 代替-60px。表示您要旋转 180 度。 -60 + 180 = 120。

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