在CSS中绘制曲线三角形用于菜单

Question

在CSS中绘制曲线三角形用于菜单

4

我在尝试制作一个带有弯曲三角形指针的菜单。我已经尝试过，但无法实现所需的弯曲效果。

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

请参考这个代码片段

我也在上面附上了一张图片，它展示了我所需要的内容。

我建议不要使用SVG来解决问题。

- Santhosh Kumar

2

我认为你在这里对CSS的要求可能过高了。你尝试过使用图像吗？ - Graham

可以使用“transform”来实现。 - gevorg

1

你可以尝试使用这个链接 https://jsfiddle.net/ffneu0cz/3/ - Lucian

@Harry，请检查我的图像。我希望一直是曲线的，而不仅仅是在三角形的顶部。 - Santhosh Kumar

哦，好的@SanthoshKumar，但这样你的选择就受到了很大的限制。带有外弧形状的图形无法轻松地使用CSS完成。SVG将是您最好的选择。 - Harry

显示剩余2条评论

2个回答

3

请查看此代码片段和另一个代码片段。

我使用了具有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;
}

- Leo the lion

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gevorg · Accepted Answer

这可能会有所帮助

/**
 * How to make 3-corner-rounded triangle in CSS (SO)
 * https://dev59.com/r2Yq5IYBdhLWcg3wfgnd
 */
.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>