离子中的CSS圆锥形状

Question

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

Answer 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>