CODEWITHSUNDEEP
jquerycsscss-shapesshapesslick.js
Adam
Adam

Reputation: 1242

Triangles using css with slick slider

i'm using slick slider and want to make the slider triangle shaped. Tried using 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);
    }
}

see codepen http://codepen.io/adamjw3/pen/aBYrMK?editors=1111

This works well for a right angled triangle but i can't get it to work for equilateral triangle, obtuse or scalene.

Can't use borders cause i want the image to be in the middle. currently i'm ditched using css and gone for svg graphics but this doesn't have such a nice animation effect when you click to enlarge.

Can equilateral triangle, obtuse and scalene be done using css3?

Thanks

Upvotes: 1

Views: 761

Answers (1)

Rounin
Rounin

Reputation: 29511

One approach which will give you a lot of easy control over any amount of animation is to use ::before and ::after pseudo-elements:

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>

Upvotes: 1

Related Questions