CSS로 "액체 육각형"을 만들 수 있습니까?

아래 디자인을 공유하고 있습니다.

그리고 내 코드 :

https://jsfiddle.net/09h5coq8/

.hex {
        position: relative;
        margin: 1em auto;
        width: 200px; 
        height: 346.4px;
        border-radius: 20px/10px;
        background: rgb(139,21,186);
        background: linear-gradient(70deg, rgba(139,21,186,1) 0%, rgba(64,13,104,1) 100%);
        background-size:cover;
        transition: opacity .5s;
        transform: rotate(20deg);
        margin-top:125px;
        }
        .hex:before, .hex:after {
        position: absolute;
        width: inherit; height: inherit;
        border-radius: inherit;
        background: inherit;
        content: '';
        }
        .hex:before {
            -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
            background: linear-gradient(180deg, rgba(139,21,186,1) 0%, rgba(64,13,104,1) 100%);
        }
        .hex:after {
            -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
            background: linear-gradient(-50deg, rgba(139,21,186,1) 0%, rgba(64,13,104,1) 100%);
        }
       .hex-inside {
        position: absolute;
        width: 150px; 
        height: 259.8px;
        border-radius: 15px/7.5px;
        background: grey;
        transition: opacity .5s;
        z-index:99;
        left:25px;
        top:43.3px;
        }
        .hex-inside:before, .hex-inside:after {
        position: absolute;
        width: inherit; height: inherit;
        border-radius: inherit;
        background: inherit;
        content: '';
        }
        .hex-inside:before {
            -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
        }
        .hex-inside:after {
            -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
        }



<div class="hex">
        <div class="hex-inside">
            
        </div>  
    </div>

보시다시피, 내 코드에는 더 많은 "날카로운 모서리"가 깨진 "그라데이션"과 느낌이 충분하지 않습니다. 뭐가 문제 야?

"순수한 CSS와 자바 스크립트"로 어떻게 이것이 가능할 수 있습니까?

SVG로 만들어야합니까?