加入收藏 | 设为首页 | 会员中心 | 我要投稿 晋中站长网 (https://www.0354zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

45个值得收藏的CSS形状

发布时间:2019-04-23 13:11:29 所属栏目:优化 来源:前端小智
导读:CSS能够生成各种形状。正方形和矩形很容易,因为它们是 web 的自然形状。添加宽度和高度,就得到了所需的精确大小的矩形。添加边框半径,你就可以把这个形状变成圆形,足够多的边框半径,你就可以把这些矩形变成圆形和椭圆形。 我们还可以使用 CSS 伪元素

39.月亮

  1. #moon {  
  2. width: 80px;  
  3. height: 80px;  
  4. border-radius: 50%;  
  5. box-shadow: 15px 15px 0 0 red;  
  6. }  

40.旗

  1. #flag {  
  2. width: 110px;  
  3. height: 56px;  
  4. box-sizing: content-box;  
  5. padding-top: 15px;  
  6. position: relative;  
  7. background: red;  
  8. color: white;  
  9. font-size: 11px;  
  10. letter-spacing: 0.2em;  
  11. text-align: center;  
  12. text-transform: uppercase;  
  13. }  
  14. #flag:after {  
  15. content: "";  
  16. position: absolute;  
  17. left: 0;  
  18. bottom: 0;  
  19. width: 0;  
  20. height: 0;  
  21. border-bottom: 13px solid #eee;  
  22. border-left: 55px solid transparent;  
  23. border-right: 55px solid transparent;  
  24. }  

(编辑:晋中站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读