纯css实现网络图标
<html> <head><title>css图标title><meta charset="utf-8"> head> <style>.box{width: 0;height: 0;border-top: 20px solid transparent;border-bottom: 20px solid transparent;border-left: 20px solid transparent;border-right: 20px solid red;}.box1{width: 50px;height: 50px;margin: 100px auto;background-color: red;transform: skew(-25deg);}.box2{width: 50px;height: 50px;margin: 100px auto;color: #000;border: 1px solid;border-radius: 50%;outline: 10px solid;outline-offset: -26px;}.box3{width: 50px;height: 50px;margin: 100px auto;color: #000;border: 1px solid;border-radius: 50%;outline: 10px solid;outline-offset: -35px;}.box4{width: 50px;height: 50px;margin: 100px auto;color: #000;border: 1px solid;border-radius: 50%;outline: 10px solid;outline-offset: -35px;transform: rotate(45deg);}.box5{width: 50px;height: 0px;margin: 100px auto;box-shadow: 36px 10px 0 3px red,36px 0 0 3px red,36px 20px 0 3px red;}.box6{width: 0;margin: 100px auto;color: red;border: 8px solid transparent;border-top: 8px solid red;box-shadow: 0 -12px 0 -4px;}.box7{width: 0;height: 8px;background-color:orange;border: 8px solid transparent;border-bottom: 8px solid #fff;}.box8 {width: 0;height: 0;margin: 100px auto;border: 10px solid transparent;border-left: 10px solid red;-webkit-box-reflect: left 5px;box-reflect:left 5px;} style> <body> <div class="box">div> <div class="box1">div> <div class="box2">div> <div class="box3">div> <div class="box4">div> <div class="box5">div> <div class="box6">div> <div class="box7">div> <div class="box8">div> body> html>
转载于:https://www.cnblogs.com/pcx105/p/8656386.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！