CSS round cone shape in Ionic

Question

I'm working in a App project using the Ionic framework. I am trying to make a navigation button for TV remote control. My objective is to make the buttons like the image in the link below (from kodi ios remote App) using CSS. Can someone help me?

Answer 1

define your wrapper and rotate it at 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>