html加css绘制oprea的logo,用html,css绘制opera-logo

opera-logo

第一种

用伪元素

▪ html

▪ css

div{

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

width: 100px;

height: 100px;

border-radius: 50%;

background-image: linear-gradient(to bottom,#f78384,#90090a);

}

div:before {

content: '';

display: block;

width: 50px;

height: 80px;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

border-radius: 50%;

background-color: #fff;

}

第二种 用径向渐变?

▪html

▪css

div{

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

width: 100px;

height: 100px;

border-radius: 50%;

background-image: radial-gradient(ellipse 22px 41px,white 30px,transparent),

linear-gradient(to bottom,#f78384,#90090a);

}

关键是用两个,或者多个重叠,利用transparent这个颜色.

也许有高手,只需要一个radial-gradient就能解决

第三种 利用svg ,,

这个不熟悉,基本就是从手册中复制粘贴,组合一下,调整了一下数据

▪html