倒圆角 CSS 三角形

Question

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

.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

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

您可以使用 120deg 而不是 -60px。意味着你想旋转 180 度。 -60 + 180 = 120.

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

Answer 3

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

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

倒圆角 CSS 三角形

Rounded CSS triangle upside down

html

css

css-transforms