Мне нужен серый полукруг, чтобы включить кавычку, чтобы она была правильной высоты, но мне также нужна эта строка, чтобы иметь возможность переполнения из ее контейнеров.
.CONTAINER {
width: 70%;
position: relative;
margin-left: 15%;
margin-right: 15%;
margin-top: 25%;
margin-bottom: -10px;
overflow: hidden;
}
.halfCircle {
max-width: 100%;
background: darkgray;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom: 0;
text-align: center;
overflow: visible;
margin-bottom: -10px;
}
#QUOTE22 {
text-align: center;
margin-top: -32px;
font-size: 1.3em;
letter-spacing: 2px;
font-weight: 30;
}
#PLogo {
position: relative;
margin-left: auto;
margin-right: auto;
height: 200px;
width: 200px;
}
#FrontQuote {
height: 1.3em;
width: 1.3em;
position: relative;
right: -5px;
}
#QUOTE {
text-align: center;
line-height: 100%;
letter-spacing: 1px;
font-size: 1.3em;
}
#QUOTE12 {
text-align: center;
line-height: 100%;
letter-spacing: 0px;
font-size: 1.3em;
margin-top: 10px;
z-index: 100;
overflow: visible;
}
#BackQuote {
height: 1.7em;
width: 1.7em;
transform: rotate(180deg);
z-index: 100;
overflow: visible;
}
#stock1 {
position: absolute;
margin-top: -52.5px;
margin-left: -8px;
width: 101.5vw;
height: auto;
max-height: 500px;
filter: grayscale(1);
opacity: .5;
background: #121212;
z-index: -1;
}
<div class="CONTAINER">
<div class="halfCircle">
<img id="PLogo" src="https://static.wixstatic.com/media/058e45_e590acfd22c440f4b5c89450738f321d~mv2.png/v1/fill/w_438,h_438,al_c,q_85,usm_0.66_1.00_0.01/058e45_e590acfd22c440f4b5c89450738f321d~mv2.webp">
<p id="QUOTE12"><img id="FrontQuote" src="https://static.wixstatic.com/media/058e45_df55c46642a94f489cf76fa18cc13cb8~mv2.png/v1/fill/w_50,h_50,al_c,q_85,usm_0.66_1.00_0.01/Logo%20Quotes.webp"> WHAT WE LEARN WITH PLEASURE, WE NEVER FORGET
<sub><sub><img id="BackQuote" src="https://static.wixstatic.com/media/058e45_df55c46642a94f489cf76fa18cc13cb8~mv2.png/v1/fill/w_50,h_50,al_c,q_85,usm_0.66_1.00_0.01/Logo%20Quotes.webp"></sub></sub>
</p>
</div>
</div>
</section>
<section id="SKILLS">
<p id="QUOTE22">- ALFRED MERCIER</p>
<img id="stock1" src="https://media.istockphoto.com/photos/graphic-designer-drawing-on-graphics-tablet-at-workplace-picture-id865230556">
Некоторая дополнительная информация, поскольку бот говорит, что мне нужно больше слов:
Я прочитал в другом посте, что кто-то предложил иметь контейнер вокруг полукруга и иметь , чтобы было переполнено: скрыто, чтобы ребенок ребенка не был затронут, но это не сработало для меня ниже.
Я бы предпочел только HTML или CSS ответов, поскольку это все, что я знаю на данный момент ... но если нет другого пути, я попробую другие языки.
Мне будет сложно слишком корректировать позицию, но я где-то читал другой комментарий, что позиция может быть проблемой, поэтому я попытался убрать теги позиции из максимально возможного количества элементов.