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

我正在尝试制作一个弯曲的三角形指针菜单。我尝试过，但无法实现弯曲的效果。在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 
}

参见上面就是我实际上是寻找

我建议的解决方案fiddle

我也有附加的图像，而无需使用SVG

来源

2016-06-14 Santhosh Kumar

我想你可能会问太多的CSS这里。你有尝试过使用图片吗？ – Graham

我可以用image @Graham轻松制作。但任何可能性与css –

然后使用一个图像 – Graham

这可能有助于

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

 
.triangle { 
 
\t transform: rotate(90deg) skewX(-30deg) scale(1,.866); 
 
} 
 
.triangle:before { 
 
\t transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); 
 
} 
 
.triangle:after { 
 
\t 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>

来源

2016-06-14 10:38:41 gevorg

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

我没有检查更新的版本..现在它确定 –

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

来源

2016-06-14 10:47:59

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

回答

相关问题