用css画简单的图形

2023-12-16 分类：网站建设

今天，我们要学习如何使用简单的CSS来创建不同类型的平面图形。

使用代码

矩形

.rectangle { width: 250px; height: 150px; background-color: #6DC75F; }

<div></div>

三角形

.triangleUp { border-left: 75px solid transparent; border-right: 75px solid transparent; border-bottom: 150px solid #6DC75F; width: 0; height: 0; }

<div class="triangleUp"></div>

椭圆形

.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>

月牙形

.moon { width: 150px; height: 150px; border-radius: 50%; box-shadow: 15px 15px 0 0 green; }

<div class="moon"></div>

树叶

.leaf { border-radius: 5px 300px 3px 300px; background: #6DC75F; width: 150px; height: 150px; }

<div class="leaf"></div>

CSS能让你完成很多令人惊艳的事情…

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

新闻标题：用css画简单的图形
文章路径：https://www.cdcxhl.com/news32/308882.html

成都网站建设公司_创新互联，为您提供网站设计、域名注册、全网营销推广、定制开发、静态网站、网站排名

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容