Question

我找到了一个用于创建圆角三角形的代码。我想将整个三角形上下颠倒以类似于下拉选择元素中常用的三角形标记。

＆＃13;

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

＆＃13;

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

＆＃13;

此外，还有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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

删除三角类中的rotate属性

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

试用下面的代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用120deg代替-60px。意味着你要旋转180度。 -60 + 180 = 120。

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

圆形的CSS三角形颠倒了

3 个答案: