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:
I found something similar here but without inverted rounded corner CSS Inverted Triangle image overlay
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>
