css3矩形到六边形的动画是如何实现的呢？

html-css09

css3矩形到六边形的动画是如何实现的呢？,第1张

css3矩形到六边形 .arrow{   

              display: inline-block   

              width:0px   

              height: 0px   

              border-style: solid   

              border-width: 100px //与padding、margin属性类似，顺序为上、右、下、左   

              border-color: red blue orange gray//顺序为上、右、下、左}

css不同的多边形的层写法是不同的。

一、梯形代码：

.triangle {

    border-bottom: 100px solid #F36823

    border-left: 50px solid transparent

    border-right: 50px solid transparent

    height: 0

    width: 100px

}

二、六角星代码：

.triangle{

    width: 0

    height: 0

    border-left: 50px solid transparent

    border-right: 50px solid transparent

    border-bottom: 100px solid red

    position: relative

}

 

.triangle:after {

    width: 0

    height: 0

    border-left: 50px solid transparent

    border-right: 50px solid transparent

    border-top: 100px solid red

    position: absolute

    content: ""

    top: 30px

    left: -50px

}

3、五角星代码：

.triangle{

    margin: 50px 0

    position: relative

    display: block

    color: #F36823

    width: 0px

    height: 0px

    border-right:  100px solid transparent

    border-bottom: 70px  solid #F36823

    border-left:   100px solid transparent

    -moz-transform:    rotate(35deg)

    -webkit-transform: rotate(35deg)

    -ms-transform:     rotate(35deg)

    -o-transform:      rotate(35deg)

}

 

.triangle:before {

    border-bottom: 80px solid #F36823

    border-left: 30px solid transparent

    border-right: 30px solid transparent

    position: absolute

    height: 0

    width: 0

    top: -45px

    left: -65px

    display: block

    content: ''

    -webkit-transform: rotate(-35deg)

    -moz-transform:    rotate(-35deg)

    -ms-transform:     rotate(-35deg)

    -o-transform:      rotate(-35deg)

}

 

.triangle:after {

    position: absolute

    display: block

    color: #F36823

    top: 3px

    left: -105px

    width: 0px

    height: 0px

    border-right: 100px solid transparent

    border-bottom: 70px solid #F36823

    border-left: 100px solid transparent

    -webkit-transform: rotate(-70deg)

    -moz-transform:    rotate(-70deg)

    -ms-transform:     rotate(-70deg)

    -o-transform:      rotate(-70deg)

    content: ''

}

4、六边形代码：

.triangle{

    width: 100px

    height: 55px

    background: #F36823

    position: relative

}

 

.triangle:before {

    content: ""

    position: absolute

    top: -25px

    left: 0

    width: 0

    height: 0

    border-left: 50px solid transparent

    border-right: 50px solid transparent

    border-bottom: 25px solid #F36823

}

 

.triangle:after {

    content: ""

    position: absolute

    bottom: -25px

    left: 0

    width: 0

    height: 0

    border-left: 50px solid transparent

    border-right: 50px solid transparent

    border-top: 25px solid #F36823

}