1

Hello is it possible create a triangle with inverted rounded corner in the center of a rectangle, like in many landing page. Something like the below image:

enter image description here

I found something similar here but without inverted rounded corner CSS Inverted Triangle image overlay

Community
  • 1
  • 1
JoTaRo
  • 173
  • 12

1 Answers1

5

Yes, it is possible to achieve this effect by using two pseudo-elements. We need to position one of the pseudo-elements with respect to the left of the container while other is positioned with respect to right of the container. Then by adding a transform: skew() on them in opposite directions and assigning a border-radius to the required sides we can get the required output.

div {
  position: relative;
  height: 50px;
  width: 100%;
  padding-top: 50px;
  background: blue;
  background-clip: content-box;
  /* make sure blue background doesn't appear behind triangle */
  overflow: hidden;
  color: white;
}
div:before,
div:after {
  position: absolute;
  content: '';
  top: 0;
  width: calc(50% + 10px);
  /* don't change */
  height: 50px;
  /* must be equal to padding-top */
  background: blue;
}
div:before {
  left: 0;
  transform: skew(45deg);
  transform-origin: right bottom;
  border-top-right-radius: 12px;
}
div:after {
  right: 0;
  transform: skew(-45deg);
  transform-origin: left bottom;
  border-top-left-radius: 12px;
}
<div class='shape'>This is a shape.</div>
Harry
  • 87,580
  • 25
  • 202
  • 214