滑らかなスライダーでCSSを使用する三角形

Question

滑らかなスライダーを使用していて、スライダーを三角形にしたいと思っています。

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

をゆがめるCSS3使用してみました。これは、直角三角形に適していますが、私はそれが鈍角または不等辺正三角形のために仕事を得ることができないhttp://codepen.io/adamjw3/pen/aBYrMK?editors=1111

をcodepen参照してください。

境界線を使用できないため、画像が中央に表示されます。現在私は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>