如何制作垂直橢圓形的形狀div？
[英]How to make a vertical oval type of shape div?
問題描述
我想創建一個像下面這樣的橢圓形但失敗了
還有什么方法可以在這個橢圓形的 css 中插入圖像？ 這是我的主要目標。
#oval { margin: 0px 0 10 02px; background: black; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 70px; border-radius: 50px / 50px; border-top-left-radius: 150px; border-top-right-radius: 150px; border-bottom-left-radius: 150px; border-bottom-right-radius: 150px; width: 80px; height: 100px; }
<:DOCTYPE html> <html> <head> <script src="http.//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div id="oval_parent"> <div id="oval"></div> </div> </body> </html>
2 個解決方案
解決方案1
3 已采納 2020-07-02 08:46:26
您可以將 SVG 視為掩碼，您可以輕松獲得此形狀。
.box { width:300px; display:inline-block; background:url(https://picsum.photos/id/1074/800/800) center/cover; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 78' ><path d='M0 39 C0 61 8 78 32 78 C56 78 64 61 64 39 C64 19 56 0 32 0 C8 0 0 19 0 39 Z' /></svg>") 0 / 100% 100%; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 78' ><path d='M0 39 C0 61 8 78 32 78 C56 78 64 61 64 39 C64 19 56 0 32 0 C8 0 0 19 0 39 Z' /></svg>") 0 / 100% 100%; }.box::before { content:""; display:block; padding-top:121%; }
<div class="box"></div> <div class="box" style="width:150px;"></div>
below the SVG I am using and if you want to edit it here is a good online tool where you simply need to append the path into the url to start editing: https://jxnblk.github.io/paths/?d=M0 39 C0 61 8 78 32 78 C56 78 64 61 64 39 C64 19 56 0 32 0 C8 0 0 19 0 39 Z
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 78' width='100' > <path d='M0 39 C0 61 8 78 32 78 C56 78 64 61 64 39 C64 19 56 0 32 0 C8 0 0 19 0 39 Z' /> </svg>
解決方案2
1 2020-07-01 21:38:58
謝謝@dgknca，我嘗試使用您的clipreact並添加border-radius完成了這項工作，更新：問題，寬度和頂部高度看起來不錯，但頂部曲線在我的要求圖像中被弄平了，這個從頂部太橢圓了幫助？
#oval { margin: 0px 0 10 02px; background: url("https://picsum.photos/536/354"); -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 70px; border-radius: 50px; clip-path: ellipse(50% 50% at 50% 50%); width: 82.4px; height: 100px; }
<div id="oval"></div>
CSS div橢圓形
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.