小米发布了新logo

前段时间小米宣布了他们的新logo,但是细心的网友发现.小米的官网logo是这样实现的:

挺有趣的,我自己也实现一个试试

外边框使用border-box实现圆角(真logo是R角,即椭圆,border-box实现不了)
添加伪元素实现三个边框 ,
添加第二个伪元素实现M中间的那一点
再给那一点添加距离自己比较远的相同颜色的阴影
实现效果
没还原,只是像,r角border-box实现不了.

以下是代码

<body><div class="box"></div>
</body>

.box{width:100px;height:100px;border-radius: 40px;background:#ff6900;position:relative;
}
.box:before{border: solid;border-color: white;border-left-width:8px;border-right-width:8px;border-top-width:8px;border-bottom: none;border-radius:2px;border-top-right-radius:10px;content:'';display:block;position:absolute;width:20px;height:25px;top:50%;left:20px;transform:translateY(-50%)
}
.box:after{content:'';display:block;position:absolute;top: 50%;left: 33.5px;width:8px;height:16px;background: white;border-radius:1px;box-shadow:  33px 0px 0px 0px white,33px -10px 0px 0px white,33px -15px 0px 0px white;}

只用一个div画一个小米logo相关推荐

只用一个div画一个太极图
如题,最近学习css3的时候,比着葫芦画瓢,画了个太极图: <!DOCTYPE html> <html lang="en"> <head>< ...
html中怎么让一个div显示或隐藏,怎么让一个div显示一个div隐藏?
让一个div显示一个div隐藏的方法如下(代码的规格写法只能这样): 1.HTML代码如下: menu0 menu1 menu2 menu3 menu4 menu5 menu6 menu7 d0 d1 ...
html动态显示隐藏div,div隐藏与显示属性怎么让一个div显示一个div隐藏
怎么让一个div显示一个div隐藏总是显示 js控制div显示与隐藏,js利用"hover"属性 1.首先样式要设定好,在每个li区域只能显示a或者b. 2.引入js库代码(jq ...
退出图标html css 实现,用一个div画出关闭图标
今天实现一个用一个div来实现关闭按钮图标,其中主要用到的技巧:css3伪元素:before,:after,css3的transform:rotate(),同时让该图标居中,此次是用了flex弹性布 ...
python同切圆_画一组同切圆画一组同心圆画一个五角星画一个黄色实心五角星 turtle.up() turtle.goto(0,-100) turtle.down() ...
1.画一组同切圆 >>> import turtle >>> turtle.circle(10) >>> turtle.circle(15) &g ...
【css太极图】html+css用一个div画出太极图
html和css都很简单,这里也就不多说了,直接看效果: html代码,复制到html文件直接打开即可. <!DOCTYPE html> <html lang="en&qu ...
使用html div 画一个简易的房子
直接上源码: <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...
css：只用一个div实现八卦图
只用一个div实现一个八卦图效果图: html: <div></div> css: 方法一 :(利用边框) <style>div{width: 100px;hei ...
CSS3_边框 border 详解_一个 div 的阴阳图
(面试题) 怎么样通过 CSS 画一个三角形: 1. 元素的 width 和 height 设置为 0 2. 边框足够大 3. 需要的三角形的部分, border-top-color 设置为 ...

只用一个div画一个小米logo

小米发布了新logo

挺有趣的,我自己也实现一个试试

只用一个div画一个小米logo相关推荐

最新文章

热门文章