Как сделать форму яйца с помощью CSS
Я пытаюсь создать форму, похожую на ту, что на этой картинке: 
Попытка использовать border-radius для нацеливания на верхний левый и нижний левый углы моего div дает близкий эффект, но я не могу получить такую резкую кривую. Есть ли элегантное решение для этого? Я немного заглянул в clip-path, но не уверен, стоит ли это делать.
Я не уверен. Можно ли использовать SVG с API карт Google?
Что вы имеете в виду под использованием API Google? Вы хотите интегрировать iframe карты Google в эту фигуру?
@FabienGreard Совершенно верно. У меня уже есть карта, и я просто пытаюсь придать ей такую форму.
Ответы 1
Сделать это с border-radius можно так:
.box {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.box:before {
content: "";
position: absolute;
width: 120%;
height: 150%;
transform: rotate(-50deg) translate(45%, 15%);
background: grey;
border-radius: 35px;
}<div class = "box">
</div>Или используйте SVG в качестве фона:
.box {
width: 200px;
height: 200px;
position: relative;
background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='grey'><path d='M32 0 C12 28 10 18 38 64 L64 64 L64 0 Z' /></svg>") center/100% 100% no-repeat;
}<div class = "box">
</div>ОБНОВИТЬ
Если вы хотите использовать карту ниже, вы можете попробовать что-то вроде этого:
.box {
width: 200px;
height: 200px;
position: relative;
background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='white'><path d='M32 0 C12 28 10 18 38 64 L0 64 L0 0 Z' /></svg>") center/100% 100% no-repeat,
url(https://picsum.photos/200/200?image=1069);
}<div class = "box">
</div>Есть ли способ сделать это без псевдоэлемента before?
@VincentNguyen Я добавил еще один способ;)
Большое спасибо! Это решает исходный пост, но, к сожалению, мне кажется, что мне нужно продолжать поиск альтернативного решения, потому что я недостаточно конкретен в своем OP. Моя реальная проблема заключается в том, что div будет содержать карту Google, поэтому я предположил, что мне нужно создать SVG / псевдоэлементы, которые являются пробелами и покрыть карту этим, иначе моя карта будет полностью серой. Спасибо.
@VincentNguyen Хорошо, я вижу, все еще можно применить мои методы ... Я отредактирую свой ответ, как вы хотите;)
Я пытаюсь создать пробел, но не знаю, как создать круглую часть посередине. Я могу сделать две прямые линии сверху и снизу с помощью :: before и :: after ..
@VincentNguyen проверяю обновление, я инвертирую SVG
Мой div содержит карту, поэтому я попытался переместить SVG в отдельный отдельный элемент и установить для моего div clip-path этот svg. Я подхожу ближе, он имеет правильную форму, слишком маленький
@VincentNguyen не нужен клип-путь ... возьмите код, который я написал последним, удалите фоновое изображение и оставьте только SVG, а затем просто поместите этот элемент над картой, используя абсолютную позицию
Вроде почти работает. Я установил высоту SVG равной 100%, но в следующем разделе ниже он проходит над родительским контейнером. Кроме того, поскольку svg должен иметь z-index для отображения над картой, я теряю возможность щелкать и перетаскивать карту ... возможно, нужно искать другое решение, не уверен.
@VincentNguyen Ах, если вы хотите иметь возможность щелкать / перетаскивать, вы можете добавить pointer-events: none; в SVG, также убедитесь, что вы добавили position:relative в родительский элемент, чтобы высота не переполнялась
Вау .... это работает, не могу поверить, что он работал над этим 5 часов ... Хотел бы я дать вам больше зеленых чеков. Прочитаю немного в svg, чтобы узнать, как вы пришли к этому пути.
@VincentNguyen вот ссылка, которую я использую для создания фигур SVG;) jxnblk.com/paths/…
Отлично, спасибо за этот ресурс. Теперь поработаем над тем, чтобы сделать его более отзывчивым, поскольку он сжимается на маленьких экранах :)
Вам не подходит svg?