How to use css to realize sector menu
This article mainly introduces how to use css to achieve the fan menu, the article is very detailed, has a certain reference value, interested friends must read it!
# sector {
Position: relative
Overflow: hidden
Width: 200px
Height: 100px
Margin: 150px auto
Background-color: # ddd
Border-top-left-radius: 100px
Border-top-right-radius: 100px
}
# sector ul li {
List-style: none
Position: absolute
Width: 200px
Height: 100px
Right: 50%
Top: 0
-webkit-transform-origin: 100%
-moz-transform-origin: 100%
-ms-transform-origin: 100%
Transform-origin: 100%
}
# sector .sector1 {
Background-color: # fef4ac
-webkit-transform: skew (54deg)
-moz-transform: skew (54deg)
-ms-transform: skew (54deg)
Transform: skew (54deg)
}
# sector .sector2 {
Background-color: # FCF6E6
-webkit-transform: rotate (36deg) skew (54deg)
-moz-transform: rotate (36deg) skew (54deg)
-ms-transform: rotate (36deg) skew (54deg)
Transform: rotate (36deg) skew (54deg)
}
# sector .sector3 {
Background-color: # faf2cc
-webkit-transform: rotate (72deg) skew (54deg)
-moz-transform: rotate (72deg) skew (54deg)
-ms-transform: rotate (72deg) skew (54deg)
Transform: rotate (72deg) skew (54deg)
}
# sector .sector4 {
Background-color: # f9f1e9
-webkit-transform: rotate (108deg) skew (54deg)
-moz-transform: rotate (108deg) skew (54deg)
-ms-transform: rotate (108deg) skew (54deg)
Transform: rotate (108deg) skew (54deg)
}
# sector .sector5 {
Background-color: # f5e79e
-webkit-transform: rotate (144deg) skew (54deg)
-moz-transform: rotate (144deg) skew (54deg)
-ms-transform: rotate (144deg) skew (54deg)
Transform: rotate (144deg) skew (54deg)
}
# sector ul li p {
Position: absolute
Top: 50px
Left: 150px
-webkit-transform: skew (- 54deg) rotate (- 70deg)
-moz-transform: skew (- 54deg) rotate (- 70deg)
-ms-transform: skew (- 54deg) rotate (- 70deg)
Transform: skew (- 54deg) rotate (- 70deg)
}
A
B
C
D
E
The above is all the contents of the article "how to use css to implement a fan menu". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
