标签:rotate 画出 45deg transform height content width div 图标
今天实现一个 用一个div来实现关闭按钮图标,其中主要用到的技巧:css3伪元素:before,:after,css3的transform:rotate(),同时让该图标居中,此次是用了flex弹性布局。
css样式如下:
<style>
html,body{
width:100%;
height:100%;
overflow: hidden;
display: flex;
justify-content:center;
align-items:center;
}
.closed{
width:60px;
height:60px;
border:1px solid green;
border-radius: 50%;
position: relative;
}
.closed:before{
content: ”;
display: block;
position: absolute;
width:90%;
height:1px;
background: #666;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
top:30px;
left:5%;
}
.closed:after{
content: ”;
display: block;
position: absolute;
width:90%;
height:1px;
background: #666;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
top:30px;
left:5%;
}
</style>
<body>
<!– by-koich51 主要用到利用css3的伪元素 :before :after
和css3的转换角度 transform: rotate(90deg);–>
<div class=”closed”></div>
</body>
效果图:
标签:rotate,画出,45deg,transform,height,content,width,div,图标 来源: https://www.cnblogs.com/homehtml/p/12900266.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。