使用带有光滑滑块的 css 的三角形

Question

我正在使用光滑的滑块并希望使滑块呈三角形。尝试使用 css3 skew

 &__shape {
    overflow: hidden;
    position: absolute;
    height: 100%;
    transform: skewX(-55.98deg);
    transform-origin: 100% 0;
    transition: all 1s ease;
    width: 100%;

    div.is-zoom & {
        transform: skewX(0deg);
    }
}

见codepenhttp://codepen.io/adamjw3/pen/aBYrMK?editors=1111

这适用于直角三角形，但我无法让它适用于等边三角形、钝角或不等边三角形。

无法使用边框，因为我希望图像位于中间。目前我放弃了使用 css 并转而使用 svg 图形，但是当您单击放大时，这并没有那么好的动画效果。

等边三角形、钝角和不等边三角形可以用css3做吗？

谢谢

Answer 1

使用::before 和::after 伪元素可以让您轻松控制任意数量的动画：

body {
overflow: hidden;
}

h2 {
position: relative;
z-index: 24;
}

div {
display: inline-block;
position: relative;
top: -40px;
z-index: 12;
height: 80px;
margin: 0 30px;
background-color: rgb(255,0,0);
transition: all 1s ease-out;
}

div::before,
div::after {
content: '';
position: absolute;
top: -40px;
z-index: 6;
width: 120px;
height: 120px;
background-color: rgb(255,255,255);
transition: all 1s ease-out;
}

div:hover {
z-index: 6;
transform:scale(2);
}


/* EQUILATERAL TRIANGLE */
div:nth-of-type(1) {
width: 80px;
}

div:nth-of-type(1)::before {
left: -80px;
transform: rotate(-60deg);
}

div:nth-of-type(1)::after {
right: -80px;
transform: rotate(60deg);
}


/* OBTUSE TRIANGLE */
div:nth-of-type(2) {
width: 160px;
}

div:nth-of-type(2)::before {
left: -38px;
transform: rotate(-120deg);
}

div:nth-of-type(2)::after {
right: -38px;
transform: rotate(120deg);
}

/* SCALENE TRIANGLE */
div:nth-of-type(3) {
width: 160px;
}

div:nth-of-type(3)::before {
left: -38px;
transform: rotate(-120deg);
}

div:nth-of-type(3)::after {
top: -30px;
right: -38px;
transform: rotate(160deg);
}

<h2>Hover over any triangle to see it expand</h2>

<div></div>
<div></div>
<div></div>