手工SEO

手工SEO首页 DEDE教程 正文

css制作的圆，三角形，椭圆，箭头图标

手工SEO 2020-02-16 10:01:10 DEDE教程 76℃ 手工SEO

圆：

.yuan{ width:100px; height:100px; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; background-color:red; } <div></div>

css制作的圆，三角形，椭圆，箭头图标



椭圆

.oval { width: 200px; height: 100px; background-color: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } <div></div>

css制作的圆，三角形，椭圆，箭头图标



箭头：

.arrow{ content: ''; position: absolute; width: 30px; height: 30px; border: 10px solid #f5b24a; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); border-top: none; border-right: none; top: 9px; } <span></span>



三角形：

.rencentle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div></div>

css制作的圆，三角形，椭圆，箭头图标

上一篇：CSS截取字符串, 多余的字符用省略号显示

下一篇：CSS input checkbox自定义样式

相关文章

网站分类
标签列表

友情链接

Copyright © 2002-2019 DIYPHP. 手工SEO 版权所有
版权争议与本站无关。如有侵权请邮件与我们联系处理
Copyright © 2017-2022 | 本站由手工SEO提供技术支持 | 网站地图 | 冀ICP备14007366号-2