在 CSS 中为菜单绘制曲线三角形答案

【问题标题】：Drawing curvy triangle in css for menu在 CSS 中为菜单绘制曲线三角形
【发布时间】：2016-06-14 10:29:22
【问题描述】：

我正在尝试制作带有弯曲三角形指针的菜单。我尝试过但无法达到弯曲的效果。

<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
}

请参考fiddle

我还附上了上面的图片，我实际上在寻找什么

我推荐不使用 SVG 的解决方案

【问题讨论】：

我想你可能对 css 的要求太多了。您是否尝试过使用图片来代替？
我可以使用图像@Graham 轻松制作。但是使用 css 的任何可能性
可以使用transform。
你可以试试这个jsfiddle.net/ffneu0cz/3
@Harry 检查我的图像。我想要弯曲的方式。不仅在三角形的顶部

标签： html css css-shapes

【解决方案1】：

请检查此fiddle。

还有一个fiddle

我在之前和之后都使用了带有transform 和box-shadow 的盒子。请检查我的代码，如果您对任何一点感到困惑，请告诉我。谢谢

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;
}

【讨论】：

【解决方案2】：

这可能会有所帮助

/**
 * How to make 3-corner-rounded triangle in CSS (SO)
 * https://stackoverflow.com/q/14446677/1397351
 */
.triangle {
	position: relative;
	background-color: orange;
	text-align: left;
}
.triangle:before,
.triangle:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
	width:  100px;
	height: 100px;
	border-top-right-radius: 30%;
}

.triangle {
	transform: rotate(90deg) skewX(-30deg) scale(1,.866);
}
.triangle:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}



/* styles below for demonstration purposes only */
body { padding: 70px; }
.triangle:hover { background: rgba(0,0,255,.5) }
.triangle:hover:before { background: rgba(255,0,0,.5) }
.triangle:hover:after { background: rgba(255,255,0,.5) }

<!-- content to be placed inside <body>…</body> -->
<div class='triangle'></div>

【讨论】：

是的，我做到了，也做了一些改变，旋转它。你可以在评论中看到它。