欢迎光临散文网 会员登陆 & 注册

小米logo的css代码

2021-04-09 16:37 作者:网络爱好者聚集地  | 我要投稿

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

body {

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

  background-color: #eee;

}


div {

  position: relative;

  width: 440px;

  height: 440px;

  background-color: #EA6102;

  border-radius: 150px;

}


div::before {

  content: '';

  display: block;

  position: absolute;

  width: 190px;

  height: 170px;

  top: 132px;

  left: 86px;

  

  box-sizing: border-box;

  

  border-color: #fff;

  border-style: solid;

  

  border-left-width: 40px;

  border-right-width: 40px;

  border-top-width: 36px;

  border-radius: 4px;

  border-top-right-radius: 56px;

  border-bottom-width: 0;

}


div::after {

  content: '';

  display: block;


  position: absolute;

  top: 198px;

  left: 160px;

  width: 42px;

  height: 42px;

  background-color: #fff;

  

  border-radius: 4px;

  

  box-shadow: 0px 36px 0px 0px #fff, 

              0px 63px 0px 0px #fff,

              150px -66px 0px 0px #fff,

              150px -33px 0px 0px #fff,

              150px 0px 0px 0px #fff,

              150px 36px 0px 0px #fff,

              150px 63px 0px 0px #fff;

}</style>

</head>


<body>

<div></div>

</body>

</html>


小米logo的css代码的评论 (共 条)

分享到微博请遵守国家法律