Html 在css中为菜单绘制曲线三角形

我想用一个弯曲的三角形指针做一个菜单。我试过了，但没能达到曲线

<div>

</div>

div{
    position:relative;
    left:20%;
    height:250px;
    width:150px;
    border:1px solid #000;
    top:10%;
    background:#fff;
}
div:before, div:after{
    position:absolute;
    content:'';
    left:-20px;
    border:10px solid transparent;
    border-right-color:#fff;
    top:30px;
 }
div:after{
    left:-21px;
    border-right-color:#000;
    z-index:-1
}

div{
位置：相对位置；
左：20%；
高度：250px；
宽度：150px；
边框：1px实心#000；
排名前10%；
背景：#fff；
}
div:before，div:after{
位置：绝对位置；
内容：''；
左：-20px；
边框：10px实心透明；
右边框颜色：#fff；
顶部：30px；
}
部门：之后{
左：-21px；
右边框颜色：#000；
z指数：-1
}

参考

此外，我还附上了我的实际寻找上面的图像

我推荐不使用SVG的解决方案这可能会有所帮助

/**
*如何在CSS（SO）中制作三角圆角三角形
* https://stackoverflow.com/q/14446677/1397351
*/
.三角形{
位置：相对位置；
背景颜色：橙色；
文本对齐：左对齐；
}
.三角：以前，
.三角形：之后{
内容：''；
位置：绝对位置；
背景色：继承；
}
.三角形，
.三角：以前，
.三角形：之后{
宽度：100px；
高度：100px；
边界右上角半径：30%；
}
.三角形{
变换：旋转（90度）斜X（-30度）比例（1.866）；
}
.三角：以前{
变换：旋转（-135度）倾斜（-45度）缩放（1.414，.707）平移（0，-50%）；
}
.三角形：之后{
变换：旋转（135度）倾斜（-45度）比例（.707,1.414）平移（50%）；
}
/*以下样式仅供演示之用*/
正文{padding:70px；}
.三角形：悬停{背景：rgba（0,0255，.5）}
.triangle:hover:before{background:rgba（255,0,0,5）}
.triangle:hover:after{background:rgba（255255,0,5）}

请检查此项

还有一个

我在前后使用了带有

transform

和

box shadow

的box。请检查我的代码，如果您在任何一点上感到困惑，请告诉我。多谢各位

CSS

div{
  position:relative;
  left:20%;
  height:250px;
  width:150px;
  border:1px solid #000;
  top:10%;
  background:#fff;
}
div:before, div:after{
  position:absolute;
  content:'';
  width:30px;
  height:30px;
  left:-12px;
  background:#fff;
  top:30px;
-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);

    border-radius:5px;
}
div:after{
  left:-13px;
  border-right-color:#000;
  z-index:-1;
  border:1px solid #000;
  top:29px;
  box-shadow: 0px 1px 6px 0px #282828;
}

---

我想你可能对css要求太高了。你试过用图片来代替吗？我可以用image@Graham轻松制作。但是cssIt的任何可能性都可以通过

转换
来实现。你可以试试这个@Harry check my image。我想一路走弯路。不仅在三角形的顶部，我做了它，也做了一些改变，旋转它。你可以在评论中看到。