离子中的CSS圆锥形状

Question

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

Answer 1

定义你的包装并以45deg

旋转它

*{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>

Answer 2

虽然这可以使用css并且可能是fontawesome（尽管它不会像你提供的图像那样好）...但是使用图像会更容易和更实际。这是其中一个例子，它可以做但是值得努力吗？

也许这些教程可以让你从正确的方向开始：

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

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