只用一个div画一个小米logo

最新推荐文章于 2021-06-19 14:55:47 发布

龟霸也是高达

最新推荐文章于 2021-06-19 14:55:47 发布

阅读量346

点赞数

分类专栏： html 文章标签： css html

本文链接：https://blog.csdn.net/MS6324_ZAKU/article/details/115390376

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

小米发布了新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
      ;

}

龟霸也是高达

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
只用一个div画一个小米logo

小米发布了新logo前段时间小米宣布了他们的新logo,但是细心的网友发现.小米的官网logo是这样实现的:挺有趣的,我自己也实现一个试试外边框使用border-box实现圆角(真logo是R角,即椭圆,border-box实现不了)添加伪元素实现三个边框 ,添加第二个伪元素实现M中间的那一点再给那一点添加距离自己比较远的相同颜色的阴影实现效果没还原,只是像,r角border-box实现不了.以下是代码<body> <div class="box">
复制链接

扫一扫