Задать вопрос
@pashaa
html

Как прижать блоки один блок к низу а другой к правому верхнему углу?

<html>
    <head>
    <link href="email.css" rel="stylesheet">
    </head>
<body>
    
    <div id="top">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1170 193">
			<path d="M692.4,75c-46.1,43.5-83.1,51.9-109,51c-36.3-1.3-49.5-20.9-110.4-39.7C426.3,71.8,388,69.1,370.4,68
	               c-92.3-5.9-104.5,23.4-165.9,7.4c-48.3-12.6-53.1-34.1-97.1-34.4c-33.3-0.2-54.3,11.8-77-1C12.1,29.7,4,9.4,0-5
	               c230.8,1,461.6,2,692.4,3.1C692.4,23.7,692.4,49.4,692.4,75z"/>
		</svg>
    </div>
    
	<div id="buttom">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1170 193">
			<path d="M0,91C113.1,6.1,194.4-2,249,8c60.1,11,85.2,43.2,191,65c73,15,127.8,13.5,140,13c93.1-3.4,160.1-32.1,187-42
	               c80.2-29.4,206.9-47,408,11c-0.9,38.9-1.8,77.8-2.6,116.6L-5.9,166.9L0,91z"/>
		</svg>
    </div>
</body>
</html>

body {
    margin: 0;
    background: linear-gradient(-182deg,#4BE074 10%,#10A799 90%);
    position: relative;
    width: 100%;
    height: 100%;
}   
#buttom {
    width: 100%;
    position: absolute;
    bottom: 0;
}
#top {
    width: 100%;
    position: absolute;
    right: 0;
}
svg path {
    fill: #ffffff;
}

Пока выходит только так. И нужно чтобы все не рушилось при уменьшение размера.
Никак не могу избавится от выступа внизу и сдвинуть нормально вправо.
5a141c31c37a2631080545.png
  • Вопрос задан
  • 536 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
@ned4ded
Верстка, Фронтенд
В общем, проблем несколько:

1) вы редактируете позиционку div-контейнеров, а не самих svg внутри этих контейнеров.

2) у вас есть небольшие проблемы с пониманием того, как работает viewBox. 3 и 4 значением свойства задаются ширина и высота svg элемента. Но т.к. у svg нет как таковой ширины и высоты, т.к. это векторная графика, то это больше соотношение ширины ии высоты + их дефолтные значения для ширины равной 100%. Более того, внутренние элементы svg (у вас - path в обоих случаях) начинают свой отсчет координат от верхнего левого угла svg, соответственно, чтобы они полностью поместили в svg контейнер, нужно, чтобы сам контейнер удовлетворял соотношениям сторон, которые были использованы при создании svg-элементов.

Лучший выход:
1) Задайте для body 

display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;


Это позволит нормально расположить див - контейнеры svg.

2) Задайте самим дивам относительное позиционирование: 

#buttom {
  position: relative;
}

#top {
  position: relative;
}


3) Добавьте svg элементам классы class="top" и class="bottom"

4) Задайте классам следующие стили, чтобы расположить их внутри див-контейнеров: 

.top {
  position: absolute;
  width: 60%;
  right: 0;
}
.bottom {
  position: absolute;
  bottom: 0;
}


5) Измените viewBox для обоих svg согласно соотношениям их сторон: 

<!-- Для примера на моем фидле использовано именно такое значение.
Вообще соотношение ~ равно 5,2 к 1, расчитать можете его делением ширины на высота 
(или наоборот, как вам удобно) -->
<svg class="top" viewBox="0 0 690 133" > ... 

<!-- примерно 7,2 к 1 -->
<svg class="bottom" viewBox="0 0 1170 163" > ...


Пример тут:
https://jsfiddle.net/ned4ded/jbw09skj/3/

Надеюсь, я понял вас правильно и вы имели ввиду именно ресайз svg элементов в зависимости от ширины страницы. Чтобы посмотреть функционирование - сократите ширину iframe элемента с отображением результата
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Поменять пароль root пользователя mysql
01 мая 2024, в 23:44
1000 руб./за проект
Модифицировать android приложение
01 мая 2024, в 23:25
2000 руб./за проект
Разработка онлайн казино слот-машины "Клубника" Pixi.js или Three.js
01 мая 2024, в 23:05
1500 руб./в час
Ещё заказы