Drawing curvy triangle in css for menu

Question

I'm trying to make a menu with a curvy triangle pointers. I tried but not able to achieve the curvy one.

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

Refer the fiddle

Also i have attached image above for what i'm actually looking for

I recommend solutions without using SVG

I think you might be asking too much of css here. Have you tried using an image instead? — Graham, Jun 14 '16 at 10:34
I can make easily with image @Graham. But any possibilities with css — Santhosh Kumar, Jun 14 '16 at 10:37
@Harry check my image. I want curvy al the way. Not only at the top of the triangle — Santhosh Kumar, Jun 14 '16 at 10:59
Possible duplicate of [Drawing rounded triangle with CSS](http://stackoverflow.com/questions/11913645/drawing-rounded-triangle-with-css) — , Jun 14 '16 at 11:10
Oh ok @SanthoshKumar but then you're restricting your options a lot. Such shapes with outward curves can't be done easily with CSS. SVG would be your best bet. — Harry, Jun 14 '16 at 11:30

score 3 · Answer 1 · edited May 23 '17 at 12:18

This might help

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

Yes, I did it and also did few changes, to rotate it. You can see it in comment. — gevorg, Jun 14 '16 at 11:05

score 3 · Answer 2 · answered Jun 14 '16 at 10:47

Please check this fiddle.

And another fiddle

I have used box with transform and box-shadow on before and after. Please check my code and if you are getting confusion on any point then let me know. Thank you

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

Drawing curvy triangle in css for menu

2 Answers2