使用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); 
    } 
} 

看到codepen 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>