Как таковой: https://i.stack.imgur.com/UdHNE.png
Граница CSS, путь клипа и т. д.?
Я пробовал следующее:
div#box{
width: 38px;
height: 500px;
border: 13px solid black;
border-color: transparent black transparent transparent;
border-radius: 0 100% 100% 0;
}
<div id = "box"></div>
Но это не дает мне результата, который я ищу (кривая слишком тонкая).
Я также пытался использовать путь обрезки, но прозрачный элемент не будет «врезаться» в другой, очевидно, поскольку он прозрачен.
body {
background-color: lightblue;
}
.one {
height: 500px;
width: 38px;
background-color: white;
clip-path: ellipse(38px 50% at 0% 50%);
position: absolute;
right: 50%;
top: 0;
}
.two {
height: 500px;
width: 38px;
background-color: transparent;
clip-path: ellipse(38px 50% at 0% 50%);
position: absolute;
right: calc(50% + 13px);
top: 0;
}
<div class = "one"></div>
<div class = "two"></div>
Любая помощь будет принята с благодарностью.
Пожалуйста, покажите нам, что вы пробовали. См. stackoverflow.com/help/минимально-воспроизводимый-пример
Попробуйте обрезать оба контейнера вместо создания белого зазора.
Можете ли вы попробовать это и играть только со вторым [180%] и третьим [-2%] значением.
Здесь мы создаем требуемый clip-path
, затем создаем другой div, который создаст нам среднее пространство и применяет position: absolute
,overflow:hidden
для создания того же клипа в красном div, а затем мы устанавливаем background-color
среднего div таким же, как цвет фона экрана.
z-index
должны быть .one > .middle > .two
clip-path: ellipse(100% 180% at -2% 50% )
body {
position: relative;
min-height: 100vh;
display: flex;
place-items: center;
background-color: bisque;
}
.one{
position: relative;
height: 500px;
width: 500px;
background-color: green;
clip-path: ellipse(100% 180% at -2% 50% ) ;
z-index: 3;
}
.middle{
position: absolute;
z-index: 2;
height: 500px;
width: 500px;
clip-path: ellipse(100% 180% at -2% 50% ) ;
left:25px;
overflow: hidden;
background-color: bisque;
}
.two{
position: relative;
z-index: 1;
right:25px;
height: 500px;
width: 500px;
background-color: red;
}
<div class = "one"></div>
<div class = "middle"></div>
<div class = "two"></div>
Мы здесь не для того, чтобы делать вашу домашнюю работу. Что вы пробовали, что сработало, а что нет?