Здравствуйте, можно ли создать треугольник с перевернутым закругленным углом в центре прямоугольника, как на многих целевых страницах. Что-то вроде изображения ниже:
Я нашел здесь нечто похожее, но без перевернутого скругленного угла CSS-наложения изображения перевернутого треугольника
Да, этого эффекта можно добиться, используя два псевдоэлемента. Нам нужно расположить один из псевдоэлементов относительно левого края контейнера, а другой - по отношению к правому краю контейнера. Затем, добавив к ним transform: skew() в противоположных направлениях и назначив радиус границы требуемым сторонам, мы можем получить требуемый результат.
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>