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
– Graham, Commented Jun 14, 2016 at 10:34
I can make easily with image @Graham. But any possibilities with css — Santhosh Kumar
– Santhosh Kumar, Commented Jun 14, 2016 at 10:37
@Harry check my image. I want curvy al the way. Not only at the top of the triangle — Santhosh Kumar
– Santhosh Kumar, Commented Jun 14, 2016 at 10:59

Leo the lion · Accepted Answer · 2016-06-14 10:47:59Z

3

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

answered Jun 14, 2016 at 10:47

Leo the lion

3,0652 gold badges26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:18:10Z

3

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>

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Jun 14, 2016 at 10:38

gevorg

5,1155 gold badges40 silver badges54 bronze badges

1 Comment

gevorg Over a year ago

Yes, I did it and also did few changes, to rotate it. You can see it in comment.

Collectives™ on Stack Overflow

Drawing curvy triangle in css for menu

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related