如何制作垂直椭圆形的div形状? [英] How to make a vertical oval type of shape div?
本文介绍了如何制作垂直椭圆形的div形状?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个椭圆形的形状，如下图所示，但失败了
还有什么方法可以在此椭圆形的CSS内插入图像?这是我的主要目标.
解决方案
您可以将SVG视为蒙版，并且可以轻松获得此形状.
.box {宽度:300px;显示:行内块；背景:url(https://picsum.photos/id/1074/800/800)中心/封面；-webkit-mask:url("data:image/svg + xml; utf8，< svg xmlns ='http://www.w3.org/2000/svg'viewBox ='0 0 64 78'><路径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 ::之前{内容:"";显示:块;顶部填充:121％;} < div class ="box"></div>< div class ="box" style ="width:150px;"></div> 我正在使用的SVG下方，如果要在此处进行编辑，这是一个不错的在线工具，您只需要将路径附加到url中即可开始
< svgxmlns ='http://www.w3.org/2000/svg'viewBox ='0 0 64 78'宽度='100'><路径d ='M0 39C0 61 8 78 32 78C56 78 64 61 64 39C64 19 56 0 32 0C8 0 0 19 0 39 Z'/></svg> I want to create an oval shape like the one below but failing
Also is there any way to insert an image inside this oval shaped css? that's my main objective.
#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>
解决方案
You can consider SVG as mask and you can easily obtain this shape.
.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>
这篇关于如何制作垂直椭圆形的div形状?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
