纯 CSS 创建各种不同的图形形状
2015-11-10 00:00
826 查看
介绍
今天,我们要学习如何使用简单的CSS来创建不同类型的平面图形。
使用代码
矩形![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/9e5f382187fcb217766c0e6095e5b51e.png)
.rectangle { width: 250px; height: 150px; background-color: #6DC75F; } <div></div>
三角形
![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/c5b4e682cc693c2ec150e3ec6736a75a.png)
.triangleUp { border-left: 75px solid transparent; border-right: 75px solid transparent; border-bottom: 150px solid #6DC75F; width: 0; height: 0; } <div class="triangleUp"></div>
椭圆形
![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/bc9521cf0476c7267c61b313f5666274.png)
.oval { width: 300px; height: 150px; background: #6DC75F; -moz-border-radius: 150px / 75px; -webkit-border-radius: 150px / 75px; border-radius: 150px / 75px; } <div class="oval"></div>
月牙形
![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/8d972e2243fa06397299c5489a247e15.png)
.moon { width: 150px; height: 150px; border-radius: 50%; box-shadow: 15px 15px 0 0 green; } <div class="moon"></div>
树叶
![](https://oscdn.geek-share.com/Uploads/Images/Content/201511/4aa7f6bc12606e41c41c3fb0ccb8f1e1.png)
.leaf { border-radius: 5px 300px 3px 300px; background: #6DC75F; width: 150px; height: 150px; } <div class="leaf"></div>
兴趣点
CSS能让你完成很多令人惊艳的事情…祝大家编码愉快!原文:How to create different shapes in html using css 译文:codeceo
相关文章推荐
- CSS动态选中效果
- CSS的4种引入方式及优先级
- css布局 : 居中问题
- 8.1.3 CSS3选择器 —— 伪类
- 8.1.2 CSS3选择器 —— 结构性伪类
- css:outline
- gulp教程之gulp-minify-css
- css/js(工作中遇到的问题)-2
- i、span不显示图片,设置宽高不显示
- html中如何显示代码样式方法
- CSS link和@import的区别
- web前端-工作中经常会用到的一些样式
- css--960框架
- CSS设计模式之三权分立模式篇
- CSS3中的Opacity多浏览器透明度兼容性问题
- 基于纯CSS创建各种图形形状
- 百度左右图片按钮的样式
- CSS定位
- 容易忘的CSS总结前端项目中可能用到的CSS总结
- 几种常见的边框样式