我想用CSS做一个像图像一样的椭圆,但是我做不到。
我用figma和figma制作了那个椭圆(蓝色的,看起来像“ pacman”),它并没有告诉我如何制作椭圆的css,只有位置,我需要知道如何绘制椭圆。
另一个(三层)我将其用作图像,因为我敢打赌它比第一个椭圆更难。
非常感谢您!
答案 0 :(得分:2)
这是使用伪元素和overflow: hidden
完成此操作的一种方法:
.ellipse {
border-radius: 50%;
overflow: hidden;
background: linear-gradient(#171b6e,#2732c6);
position: relative;
width: 100px;
height: 100px;
}
.ellipse::after {
content: '';
position: absolute;
width: 50%;
top: 50%;
bottom: 0;
right: 0;
background-color: black;
}
body {
background-color: black;
}
<div class="ellipse"></div>
答案 1 :(得分:2)
您可以使用剪切路径将该部分切出
body{
display:flex;
justify-content: center;
height: 100vh;
align-items: center;
}
div {
width: 140px;
height: 140px;
background: linear-gradient(purple,blue);
clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 50%, 50% 50%, 50% 0%);
border-radius: 50%;
}
<div></div>
答案 2 :(得分:0)
您还可以使用伪类来创建它
div {
width: 200px;
height: 200px;
position: relative;
}
div:after {
content: '';
position: absolute;
width: 100px;
height: 100%;
background: linear-gradient(purple, blue);
border-radius: 500px 0 0 500px;
}
div:before {
content: '';
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
background-image: linear-gradient(30deg, blue, purple);
border-radius: 0 0 500px 500px;
background-position-x: 90px;
}
<div></div>
答案 3 :(得分:0)
这是具有多个背景,没有额外元素且具有透明度的另一个想法:
.pacman {
width:100px;
height:100px;
box-sizing:border-box;
padding-right:50px;
border-radius:50%;
background:
linear-gradient(to right,blue, purple) top/100% 50%,
linear-gradient(to right,blue, purple) padding-box content-box;
background-repeat:no-repeat;
}
body {
background:pink;
}
<div class="pacman"></div>
这里是垂直渐变:
.pacman {
width:100px;
height:100px;
box-sizing:border-box;
padding-bottom:50px;
border-radius:50%;
background:
linear-gradient(to bottom,yellow, red) left/50% 100%,
linear-gradient(to bottom,yellow, red) padding-box content-box;
background-repeat:no-repeat;
}
body {
background:pink;
}
<div class="pacman"></div>
这里是随机梯度,在这种情况下,我将考虑使用伪元素。
.pacman {
width:100px;
height:100px;
box-sizing:border-box;
padding-right:50px;
border-radius:50%;
background-image:linear-gradient(65deg,yellow, blue, purple);
background-clip:content-box;
position:relative;
overflow:hidden;
}
.pacman:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:50%;
background-image:inherit;
background-size:100% 200%;
}
body {
background:pink;
}
<div class="pacman"></div>
答案 4 :(得分:-2)
您可以使用HTML5画布来做到这一点:
prefix = json.load(open('file.json', 'r')) print("Prefixes currently are:"+str(prefix)) # prints {} even though the file includes : {"551475283459309599": "!", "557678616054464512": "!", "558760765348249609": "!", "559361893861556240": "%"}