Как использовать обратный радиус границы в верхней части карты? (ССС)
Я пытаюсь создать красную коробку (как показано на рисунке) с выемкой на верхнем крае. Этот вырез должен иметь закругленные углы с инвертированным радиусом границы. Затем я захотел написать слово в вырезе, размер которого зависел бы от длины слова. Позже на поле также будет текст. Все, что на картинке черное, должно быть прозрачным, чтобы потом можно было откорректировать фон.
Я уже пробовал бесчисленное количество раз. Но то ли фон выреза был не прозрачным, то ли углы не такие закругленные, как на картинке. Еще одна проблема, с которой я столкнулся, заключалась в том, что не все находилось в прямоугольном контейнере, а некоторые элементы находились снаружи.
Я отредактировал свой ответ, так как пропустил момент, когда выемка увеличивалась автоматически. Это то, что вы ищете?
См. также «Как создать гладкую изогнутую SVG-маску для правого верхнего угла блока?» Вы можете расширить описанные концепции под свои нужды
Ответы 2
Для этого вы можете использовать псевдоэлемент ::before. Вот пример:
div {
width: 200px;
text-align:center;
padding:10px;
border-radius: 20px;
background: green;
font-weight: bold;
font-family: sans-serif;
color: white;
padding-top: 30px;
position: relative;
}
div::before {
content: '';
display: block;
width: 100px;
height: 20px;
background: #FFF;
position: aboslute;
border-radius: 20px;
margin-top: -37px;
margin-left: calc(50% - 50px);
}<div>
<br />
Doloribus est architecto laboriosam minus a dolorem labore. Repudiandae natus voluptates tempora dignissimos eos explicabo. Quibusdam fuga et quo impedit excepturi a voluptates optio. Temporibus laborum rem aut illo ea a.
</div>Думаю, я добился этого, используя большой элемент div для всей верхней области (черная и красная части) с черным фоном.
Здесь есть 3 элемента div: левая и правая части, а также центральная область выреза.
Левый и правый имеют красный фон, область надреза — красный. Левый и правый получают радиус границы на границе экрана и границу для внутреннего радиуса границы, а вырез в области выреза получает черный фон и радиус границы для нижних краев.
Это работает только с простым фоном, а не с более сложным контентом. Могу поспорить, что можно использовать некоторые магические методы SVG и Clip Path, но если вы используете только простой фон и вам не нужно отображать контент под областью заголовка, где находится вырез, это должно работать.
Кроме того, если мы используем гибкую рамку для всей области выреза и используем пространство между шириной выреза, оно будет динамическим.
*{
--notch-top-radius: 5px;
--notch-bottom-radius: 10px;
--screen-radius: 10px;
--screen-bg: red;
--notch-bg: black;
}
body{
margin: 0;
padding: 0;
background: var(--notch-bg);
}
.screen{
background: var(--screen-bg);
height: calc(100vh - 2rem);
margin: 1rem;
width: calc(100vh / 1.61);
display: flex;
justify-content: space-between;
flex-direction: column;
border-radius: var(--screen-radius);
}
.notch-area{
background: var(--notch-bg);
display: flex;
justify-content: space-between;
width: 100%;
}
.notch .content{
font-size: 0.5rem;
color: white;
text-align: center;
white-space: nowrap;
padding: 0.1rem;
}
.notch-area .left, .notch-area .right{
width: 100%;
height: 1rem;
background: var(--screen-bg);
}
.notch-area .left{
border-radius: var(--screen-radius) var(--notch-top-radius) 0 0;
}
.notch-area .right{
border-radius: var(--notch-top-radius) var(--screen-radius) 0 0;
}
.notch-wrapper{
background:var(--screen-bg);
height: 1rem;
}
.notch{
width: 100%;
height: 1rem;
background: var(--notch-bg);
border-radius: 0 0 var(--notch-bottom-radius) var(--notch-bottom-radius);
}<div class = "screen">
<div class = "notch-area">
<div class = "left"></div>
<div class = "notch-wrapper">
<div class = "notch">
<div class = "content">Hello World</div>
</div>
</div>
<div class = "right"></div>
</div>
Doloribus est architecto laboriosam minus a dolorem labore. Repudiandae natus voluptates tempora dignissimos eos explicabo. Quibusdam fuga et quo impedit excepturi a voluptates optio. Temporibus laborum rem aut illo ea a.displayCantLoadMessage
</div>
<div class = "screen">
<div class = "notch-area">
<div class = "left"></div>
<div class = "notch-wrapper">
<div class = "notch">
<div class = "content">Hello World With longer text</div>
</div>
</div>
<div class = "right"></div>
</div>
Doloribus est architecto laboriosam minus a dolorem labore. Repudiandae natus voluptates tempora dignissimos eos explicabo. Quibusdam fuga et quo impedit excepturi a voluptates optio. Temporibus laborum rem aut illo ea a.displayCantLoadMessage
</div>Вы случайно не знаете, работает ли это как-то в React Native?
Можете ли вы предоставить минимально воспроизводимый пример , чтобы участники могли помочь вам с вашей проблемой? Также прочтите как задать хороший вопрос. Вы получите лучшие ответы, если будете следовать этому руководству.