Подскажите, как правильно сверстать блок таким образом, чтобы на пересечении двух блоков была картинка? Если верстать через position: absolute, то при адаптиве на других разрешениях придется вручную подгонять положение этой картинки
3 ответа
Так?
.zzz {
min-height: 150px;
position: relative;
}
.aaa {
clip-path: ellipse(30% 50% at 30% 50%);
background-color: rgba(255, 255, 0, 0.25);
min-height: inherit;
}
.bbb {
clip-path: ellipse(30% 50% at 70% 50%);
height: 100%;
min-height: inherit;
background-image: url('https://www.textures.com/system/gallery/photos/Fabric/Plain%20Fabric/120847/FabricPlain0147_3_350.jpg');
}
.ccc,
.ddd {
border: 2px solid black;
box-sizing: border-box;
position: absolute;
height: 100%;
border-radius: 100%;
top:0;
width:60%;
}
.ccc {left:0;}
.ddd {right:0;}
<div class="zzz">
<div class="aaa">
<div class="bbb"></div>
</div>
<div class="ccc"></div>
<div class="ddd"></div>
</div>
Решение SVG
Работает во всех браузерах, решение адаптивно
С помощью pattern заполняется изображением левый эллипс
С помощью маски, которая применена к правому эллипсу вырезается часть левого эллипса
- Одна пара эллипсов
<style>
.container {
width:50vw;
height:auto;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 400 150" >
<defs>
<pattern id="patt" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="https://i.stack.imgur.com/GF6Xi.jpg" width="100%" heigh="100%" />
</pattern>
<mask id="mask">
<rect width="100%" height="100%" fill="white" />
<ellipse cx="230" cy="50" rx="90" ry="40" fill="black" stroke="black" />
</mask>
</defs>
<ellipse fill="url(#patt)" cx="100" cy="50" rx="90" ry="40" stroke="black" />
<ellipse mask="url(#mask)" fill="white" cx="100" cy="50" rx="90" ry="40" stroke="black" />
<ellipse cx="230" cy="50" rx="90" ry="40" fill="none" stroke="black" />
</svg>
</div>
Две пары эллипсов (как в вопросе)
<style>
.container {
width:50vw;
height:auto;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 400 150" >
<defs>
<pattern id="patt" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="https://i.stack.imgur.com/GF6Xi.jpg" width="100%" heigh="100%" />
</pattern>
<mask id="mask">
<rect width="100%" height="100%" fill="white" />
<ellipse cx="230" cy="50" rx="90" ry="40" fill="black" stroke="black" />
</mask>
</defs>
<ellipse fill="url(#patt)" cx="100" cy="50" rx="90" ry="40" stroke="black" />
<ellipse mask="url(#mask)" fill="white" cx="100" cy="50" rx="90" ry="40" stroke="black" />
<ellipse cx="230" cy="50" rx="90" ry="40" fill="none" stroke="black" />
</svg>
</div>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 400 150" >
<defs>
<pattern id="patt2" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="https://i.stack.imgur.com/g29kk.jpg" width="100%" heigh="100%" />
</pattern>
<mask id="mask">
<rect width="100%" height="100%" fill="white" />
<ellipse cx="230" cy="50" rx="90" ry="40" fill="black" stroke="black" />
</mask>
</defs>
<ellipse fill="url(#patt2)" cx="100" cy="50" rx="90" ry="40" stroke="black" />
<ellipse mask="url(#mask)" fill="white" cx="100" cy="50" rx="90" ry="40" stroke="black" />
<ellipse cx="230" cy="50" rx="90" ry="40" fill="none" stroke="black" />
</svg>
</div>
UPDATE
Вариант с адаптивным текстом
.container {
width:100vw;
height:auto;
background:#FFE7D7;
}
.txt {
fill:#434238;
font-family:serif;
font-size:10px;
}
.txtN {
fill:black;
font-family:sans-serif;
font-size:18px;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 450 200" >
<defs>
<pattern id="patt" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="https://i.stack.imgur.com/GF6Xi.jpg" width="100%" heigh="100%" />
</pattern>
<mask id="mask">
<rect width="100%" height="100%" fill="white" />
<ellipse cx="310" cy="50" rx="120" ry="40" fill="black" stroke="black" />
</mask>
</defs>
<ellipse fill="url(#patt)" cx="120" cy="50" rx="120" ry="40" stroke="black" />
<ellipse mask="url(#mask)" fill="#FFE7D7" cx="120" cy="50" rx="120" ry="40" stroke="black" />
<ellipse cx="310" cy="50" rx="120" ry="40" fill="none" stroke="black" />
<!-- Для левого эллипса -->
<g>
<text class="txtN" x="20" y="30" font-size="18px" >01. </text>
<text class="txt" x="50" y="30" >Равным образом постоянный </text>
<text class="txt" x="24" y="43" >количественный рост и сфера нашей </text>
<text class="txt" x="30" y="56" font-size="10px" ><tspan style="fill:#FF872C">активности позволяет</tspan> выполнять </text>
<text class="txt" x="36" y="67" >важные задания по разработке </text>
<text class="txt" x="48" y="77" >модели развития. Товарищи! </text>
</g>
<!-- Для правого эллипса -->
<g>
<text class="txtN" x="390" y="30">02. </text>
<text class="txt" x="250" y="30" >Таким образом постоянное </text>
<text class="txt" x="244" y="43" >инфорационно-пропогандискское</text>
<text class="txt" x="250" y="56" >обеспечение нашей деятельности</text>
<text class="txt" x="244" y="67" >требует от нас <tspan style="fill:#FF872C">анализа позиций</tspan> </text>
<text class="txt" x="252" y="77" font-size="10px" >занимаемых участниками </text>
</g>
</svg>
</div>
-
В вопросе еще текст есть)) И хорошо бы вмещающий его блок подстраивался под объем текста. А так верстка принятого ответа, например, ломается при добавлении текста. А тогда для чего это все? Это фоновая картинка или что?– Leonid7 дек 2021 в 16:25
-
@Leonid согласен, не стал сам писать об этом, чтобы не сочли, что оспариваю принятый ответ. Хотя у автора вопроса было основное требование - адаптивность 7 дек 2021 в 16:28
-
@Leonid А текст добавить оч. легко и он будет подстраиваться под эллипсы. Просто поленился немного, зная, что всё равно выберут CSS :) 7 дек 2021 в 16:34
Всё зависит от того как оно себя должно вести при уменьшении дизайна к мобильному устройству. Это надо у дизайнера спрашивать. * Я бы не цеплялся за "оба блока" а отталкивался бы от правых блоков. Ну и разумеется clip-path в помощь