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

Question

我正在使用光滑的滑块并希望将滑块制作成三角形。尝试使用 css3 倾斜

 &__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);
    }
}

参见代码笔 http://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>

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

Triangles using css with slick slider

css

jquery

shapes

css-shapes

slick.js