Ionic中的CSS圆锥形状答案

【问题标题】：CSS round cone shape in IonicIonic中的CSS圆锥形状
【发布时间】：2025-12-11 17:15:02
【问题描述】：

我正在一个使用 Ionic 框架的 App 项目中工作。我正在尝试为电视遥控器制作导航按钮。我的目标是使用 CSS 使按钮类似于下面链接中的图像（来自 kodi ios 远程应用程序）。有人可以帮我吗？

【问题讨论】：

CodepenDemo - 不是我的，而是相关的

【解决方案1】：

定义你的包装器并将其旋转 45 度

*{box-sizing: border-box}
:root{
    background: skyblue;
    height: 100vh
}
figure{
    position: relative;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 2px solid black;
    margin: 40px auto;
    overflow: hidden;
    background: white;
    box-shadow: 0 0 6px 2px #000;
    transform: rotate(45deg)
}
.btn {
    width: 123px;
    height: 125px;
    position: relative;
    float: left;
    background: #000;
    transform-origin: 100% 100%;
    transition: background .3s ease;
    box-shadow: inset 0 0 1px 0px rgb(187, 187, 187);
}

.btn:hover{cursor: pointer; background: #4864e3;}

.btn:nth-of-type(2) {
    right: 0;
}

.btn:nth-of-type(3) {
    bottom: 0;
    left: 0;
}

.btn:last-of-type {
    right: 0;
    bottom: 0;
}

figure figcaption{
    box-shadow: 0 0 16px 10px #000,
                inset 0 0 3px 2px #000,
                0 0 0px 32px rgba(255, 255, 255, 0.1);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    color: rgb(187, 187, 187);
    text-align: center;
    line-height: 120px;
    margin: -60px 0 0 -60px;
    border: 4px solid rgb(187, 187, 187);
    transform: rotate(-45deg);
    background:-webkit-gradient(radial, 29 0, 0, 220 -257, 455, from(#4864e3), to(#000E1A));
}
.btn:before{
    content:'';
    opacity: .6;
    position: absolute;
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-bottom: 32px solid rgb(187, 187, 187)
}
.btn:first-of-type:before {
    top: 44px;
    left: 24px;
    transform: rotate(-45deg);
}
.btn:nth-of-type(2):before {
    top: 40px;
    left: 32px;
    transform: rotate(45deg);
}
.btn:nth-of-type(3):before {
    top: 48px;
    left: 26px;
    transform: rotate(-135deg);
}
.btn:last-of-type:before {
    top: 48px;
    left: 32px;
    transform: rotate(135deg);
}

<figure>
    <div class=btn></div>
    <div class=btn></div>
    <div class=btn></div>
    <div class=btn></div>
    <figcaption>NAV</figcaption>
</figure>

【讨论】：

太棒了！ :) 很棒的演示 :)
@Tambo。伟大的。极好的。这正是我想要的。但是我不明白代码。您能否为这类东西指出一些 CSS corse。另一件事是对于 iphone 屏幕来说太大了。你能告诉我如何让它变小吗？
@PatricioCordeiro 欢迎您。在figure 中使其更小或更大，将transform: rotate(45deg) 替换为transform: rotate(45deg) scale(.5,.5)，其中(.5,.5) 是您要查找的value。
@Tambo。非常感谢。一个问题：如何让 NAV 成为一个按钮？我真的很喜欢学习如何在 css 中做这种事情。你能给我指出一个起点吗？谢谢。
@PatricioCordeiro 我最喜欢的（Dan Cederholm，Ethan Marcotte-Handcrafted CSS）你可以看看 1-Alexis Goldstein-Learning CSS3 Animations and Transitions 2-Css3 for web Designer 3-Pro HTML5 and CSS3设计模式 4-Dudley Storey-Pro CSS3 Animation-Apress 5-CSS3- The Missing Manual, 3rd Edition 。关于 NAV 按钮，您可以使用 javascript EventTarget.addEventListener() click.

【解决方案2】：

虽然使用 css 和 fontawesome 可以做到这一点（尽管它不会像您提供的图像那么好）......为此使用图像会更容易和更实用。这是其中一种情况，可以做到但值得付出努力吗？

也许这些教程会让你从正确的角度开始：

http://www.hongkiat.com/blog/css3-on-off-button/

http://www.hongkiat.com/blog/css3-button-tutorials/

【讨论】：