html - Can't get smooth egdes on a hexagon in css -
i've made hexagon container image, can't figure how add more smooth/curved edges on it. i hoping me. .hexagon { position: relative; width: 180px; height: 103.92px; background-color: #64c7cc; margin: 51.96px 0; } .hexagon:before, .hexagon:after { content: ""; position: absolute; width: 0; border-left: 90px solid transparent; border-right: 90px solid transparent; } .hexagon:before { bottom: 100%; border-bottom: 51.96px solid #64c7cc; } .hexagon:after { top: 100%; width: 0; border-top: 51.96px solid #64c7cc; } <div class="hexagon"></div> thanks help. you can achieve similar using divs z-index , radial-gradient: <div class="hexagon"></div> <div class="circle"></div> and css: body { background-color: #eeeeee; } .circle { width: 240px; position: absolute; top:15px; height: 240px; z-index: 2; backgro...