倒置的圆形 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);
    }

尝试下面的代码段

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