css实现头像佩戴中

原创已于 2022-03-03 18:57:19 修改 · 464 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2022-03-03 18:51:01 首次发布

js基础专栏收录该内容

7 篇文章

订阅专栏

可以直接用

<!DOCTYPE HTML>
<html>
<head>
<style>
.outer{
  width:0;
  height:0;
  border:50px solid red;
  border-left-color:transparent;
  border-bottom-color:transparent;
  
  position:relative;
  white-space: nowrap; 
   
}
.inner{
width:0;
  height:0;
  border:25px solid white;
  border-left-color:transparent;
  border-bottom-color:transparent;
  
  position:absolute;
  top:-50px;
  
}
p{
 transform: translate(-10px,-70px) rotateZ(45deg);
 font-size:22px;
 color:white;
  }
</style>
</head>
<body>

<div class="outer">
  <div class="inner"></div>
  <p>佩戴中</p>
</div>
 

</body>
</html>

转载请注明出处