Search code examples
htmlcsselectronrounded-corners

Create arrow in :after with inset border radius

I'm I'm trying to create an arrow which points to the top. The arrow is currently a basic CSS after pseudo class. However, I the left and right side of the arrow need to have some kind of "inset" border radius. Any ideas how to fix this?

Since this concerns an Electron menubar app, the outer part needs to be transparent.

enter image description here

This is what I currently came up with: https://jsfiddle.net/xcpo1g2y/

Solution

  • This is maybe a start - but I'm using an extra element and it feels a bit hacky. The idea is to make the inverted border radius by having a large rectangle in the color you want, and you cover up the edges covered with shapes with border-bottom-right-radius and border-bottom-left-radius set.

    I didn't round the top of the arrow, but that would certainly be possible by using your border radius and rotation transform approach. 

    body {
  background: black;
}

.header {
  background: rgba(235,238,243,1);
  height: 40px;
  width: 100%;
  position: relative;
  margin-top: 50px;
}

/* Left flange */
.header:before {
  content: "";
  position: absolute;
  background: none;
  bottom: 100%;
  left: 50%;
  border: 25px solid black;
  border-bottom-right-radius: 25px;
  transform: translateX(-137%);
  z-index: 2;
}

/* Right flange */
.header:after {
  content: "";
  position: absolute;
  background: none;
  bottom: 100%;
  left: 50%;
  border: 25px solid black;
  border-bottom-left-radius: 25px;
  transform: translateX(37%);
  z-index: 2;
}

/* Arrow base */
.header-helper {
  background: white;
  z-index: 1;
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translateX(-50%);
}

/* Up arrow */
.header-helper:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border: 25px solid black;
  border-bottom-color: transparent;
  transform: translateX(-50%);
  background: white;
  margin-bottom: 8px;
  z-index: 2;
}
    <div class="header"><div class='header-helper'></div></div>