Question

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

<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的解决方案

Answer 1

这可能会有所帮助

/**
 * 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>

Answer 2

请检查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;
}

在css中为菜单

2 个答案: