如何使用CSS制作弯曲边缘的六边形

我想您正在寻找这个。

CSS

.hex {  position: relative;  margin: 1em auto;  width: 10em; height: 17.32em;  border-radius: 1em/.5em;  background: orange;  transition: opacity .5s;}.hex:before, .hex:after {  position: absolute;  width: inherit; height: inherit;  border-radius: inherit;  background: inherit;  content: '';}.hex:before {   -webkit-transform: rotate(60deg);   -ms-transform: rotate(60deg);   transform: rotate(60deg);}.hex:after {  -webkit-transform: rotate(-60deg);  -ms-transform: rotate(-60deg);  transform: rotate(-60deg);}