Совместите формованное векторное изображение SVG точно справа от Div, чтобы сделать его частью фона

Совместите формованное векторное изображение SVG точно справа от Div, чтобы сделать его частью фона ⇐ Html

1 сообщение • Страница 1 из 1

Anonymous

Совместите формованное векторное изображение SVG точно справа от Div, чтобы сделать его частью фона

Цитата

Сообщение Anonymous » 04 авг 2025, 13:41

Я работаю над дизайном, где у меня есть S-образная кривая SVG в рамках фона за содержащимся текстом и кнопками. В моих скриншотах вы можете увидеть то, чего я пытаюсь достичь: 
Первое изображение: это предполагаемый вид в дизайне экрана. Форма SVG находится за контентом и частично перекрывается в правом 
Второе изображение: это то, что я сейчас получаю. SVG либо смешивается, так или не уважает поток. Также остается тонкая линия пикселей между фоном Div и Svg. 
Какой лучший способ достичь этого? В качестве псевдоэлемента (:: после) на Red Div 
Что я хочу:

S-образный SVG должен быть визуально частью фона Div. 
< /li>
Идеально SVG
The shape should align consistently to the right edge of the div and scale with the div’s height.

Код: Выделить всё

.content-wrapper {
width: 50%;
background-color: red;
border-bottom-left-radius: 16px;
position: relative;
}

.content-wrapper::after {
content: " ";
display: inline-block;
height: 100%;
width: min-content;
position: absolute;
left: 100%;
top: 0;
/*Sorry, unsure how to embed the proper svg here*/
background: url("https://disk.sample.cat/samples/svg/hugging-face.svg") no-repeat;
background-size: contain;
}< /code>

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore blanditiis nemo doloremque laudantium cupiditate.

svg should show up to the right of the box.

Подробнее здесь: https://stackoverflow.com/questions/797 ... it-part-of

1754304081

Anonymous

 Я работаю над дизайном, где у меня есть S-образная кривая SVG в рамках фона за содержащимся текстом и кнопками. В моих скриншотах вы можете увидеть то, чего я пытаюсь достичь: < /p>
Первое изображение: это предполагаемый вид в дизайне экрана. Форма SVG находится за контентом и частично перекрывается в правом < /p>
Второе изображение: это то, что я сейчас получаю.  SVG либо смешивается, так или не уважает поток. Также остается тонкая линия пикселей между фоном Div и Svg. < /P>
Какой лучший способ достичь этого? В качестве псевдоэлемента (:: после) на Red Div < /p>
Что я хочу: < /p>
[list]
[*]  S-образный SVG должен быть визуально частью фона Div. < /p>
< /li>
  Идеально SVG

[*]The shape should align consistently to the right edge of the div and scale with the div’s height.

[/list]


[code].content-wrapper {
width: 50%;
background-color: red;
border-bottom-left-radius: 16px;
position: relative;
}

.content-wrapper::after {
content: " ";
display: inline-block;
height: 100%;
width: min-content;
position: absolute;
left: 100%;
top: 0;
/*Sorry, unsure how to embed the proper svg here*/
background: url("https://disk.sample.cat/samples/svg/hugging-face.svg") no-repeat;
background-size: contain;
}< /code>

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore blanditiis nemo doloremque laudantium cupiditate.

svg should show up to the right of the box.[/code]


 

Подробнее здесь: [url]https://stackoverflow.com/questions/79724552/align-a-shaped-svg-vector-image-exactly-to-the-right-of-a-div-to-make-it-part-of[/url]