html3d扇形菜单,前端网站CSS扇形菜单

分手后的思念是犯贱 2022-10-07 04:45 100阅读 0赞

/p>

\#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% 100%;

\-moz-transform-origin: 100% 100%;

\-ms-transform-origin: 100% 100%;

transform-origin: 100% 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

发表评论取消回复

表情：

评论列表（有 0 条评论，100人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS实现3D菜单效果

阅读目录效果 index.html index.css 效果 ![在这里插入图片描述][eb25e4d8324a44af96c6

偏执的太偏执、/ 2023年10月07日 20:16/ 0 赞/ 5 阅读

相关 Python-GUI PyQT5案例：注册界面窗体设计（含扇形菜单）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

悠悠/ 2023年10月05日 10:54/ 0 赞/ 15 阅读

相关 HTML/CSS 二级菜单

HTML/CSS 二级菜单代码： <!DOCTYPE html> <html lang="en"> <head> <m

矫情吗；*/ 2023年01月01日 14:57/ 0 赞/ 101 阅读

相关【CSS】CSS绘制扇形和三角形

1. CSS绘制三角形 CSS绘制三角形主要用到的是border属性，也就是边框。我们平时在给盒子设置边框的时候，往往都设置很窄，就可能误以为边框是由矩形组成的。实际

古城微笑少年丶/ 2022年11月29日 03:02/ 0 赞/ 266 阅读

相关【前端】菜单栏设计（html、css）

先展示一下效果图： ![在这里插入图片描述][20210323124506653.gif] -------------------- 目录一、代码

灰太狼/ 2022年11月12日 08:28/ 0 赞/ 194 阅读

相关 html3d扇形菜单,前端网站CSS扇形菜单

/p> \sector \{ position: relative; overflow: hidden; width: 200px; height: 100px;

分手后的思念是犯贱/ 2022年10月07日 04:45/ 0 赞/ 101 阅读

相关纯css3响应式3d翻转菜单

前端开发whqet,csdn,王海庆,whqet,前端开发专家周末快乐哈，今天来看一个纯CSS3实现的3d翻转菜单，3d响应式菜单，希望对大家有所帮助。 ![SouthE

悠悠/ 2022年08月26日 15:20/ 0 赞/ 229 阅读

相关 html5+CSS3 飘带菜单超酷3D菜单

<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>CS

古城微笑少年丶/ 2022年08月13日 14:45/ 0 赞/ 198 阅读

相关 css制作抽奖轮盘效果/扇形菜单

先上效果图 ![Center][] 附上代码： <!DOCTYPE html> <html> <head> <meta charset

拼搏现实的明天。/ 2022年06月14日 12:21/ 0 赞/ 180 阅读

相关 css画扇形按钮

最近项目中需要制作一个扇形按钮，效果是这样的： ![1478663-20190319164222762-2136079326.png][] 周围四个扇形，和中间的小圆，

秒速五厘米/ 2021年12月23日 03:17/ 0 赞/ 369 阅读