在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中繪製曲線三角形菜單

回答

相關問題