Geek Answers Handbook

Drawing a curved triangle in css for a menu

I am trying to create a menu with curvy triangle pointers. I tried, but could not achieve this.

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

Contact fiddle

I also added the image above for what I'm really looking for enter image description here

I recommend solutions without using SVG

+4
source share
2 answers

This can 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>
Run codeHide result
+3
source

Please check fiddle .

And more 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;
}
+3

More articles:


All Articles