我创建了一个使用纯CSS制作的梯形的
circular menu，但是当我旋转它们时，Firefox在两边都显示一条线，而在Opera上，所有的梯形都有一个奇怪的背景/边框颜色，透明的。梯形图
look like this。
- .trapezoid {
- width: 100px; height: 0px;
- margin: 55px auto 0 auto;
- border-bottom: 140px solid black;
- border-left: 35px solid transparent;
- border-right: 35px solid transparent;
- transition: rotate (100deg);
- }
解决方法
您将需要使用-moz for Firefox; -o为歌剧。这些是这些浏览器正确格式化的扩展。
A great site for shapes here。
- .trapezoid
- {
- border-bottom: 100px solid red;
- border-left: 50px solid transparent;
- border-right: 50px solid transparent;
- height: 0;
- width: 100px;
- transform:rotate(180deg);
- -moz-transform:rotate(180deg); /* Firefox 4 */
- -webkit-transform:rotate(180deg); /* Safari and Chrome */
- -o-transform:rotate(180deg); /* Opera */
- }
- transition:width 2s,height 2s;
- -moz-transition:width 2s,height 2s,-moz-transform 2s; /* Firefox 4 */
- -webkit-transition:width 2s,-webkit-transform 2s; /* Safari and Chrome */
- -o-transition:width 2s,-o-transform 2s; /* Opera */
只需在手之前添加转换;然后将转换抛出悬停。如果你想添加一个按钮。希望有帮助。
我使用Firebug查看一些额外的数据;与Firefox 16.02这个代码工作：
- .trapezium
- {
- height: 0px;
- width: 80px;
- border-bottom-width: 80px;
- border-bottom-style: solid;
- border-bottom-color: #2d9dcd;
- border-left-width-value: 40px;
- border-left-style-value: solid;
- border-left-color-value: transparent;
- border-right-width-value: 40px;
- border-right-style-value: solid;
- border-right-color-value: transparent;
- margin-top: 30px;
- margin-right: 0px;
- margin-bottom: 0px;
- margin-left: 10px;
- }
我相信这是你正在寻找的。尝试，让我知道，如果它的作品。
