纯css制作常见的图形

1.正方形

css 复制代码
 <div class="square"></div>
css 复制代码
.square {
        width: 100px;
        height: 100px;
        background-color: #ffff00;
      }

效果:

2.长方形

html 复制代码
<div class="rectangle"></div>
css 复制代码
 .rectangle{
        width: 200px;
        height: 100px;
        background-color: #ff0000;
     }

3.菱形

html 复制代码
<div class="rhombus"></div>
css 复制代码
 .rhombus{
       width: 100px;
        height: 100px;
        transform: rotate(45deg);
        background-color: #ffff00;
     }

4.三角形

html 复制代码
<div class="triang"></div>
css 复制代码
  .triang{
        width: 0px;
        height: 0px;
        border: 40px solid transparent;
        border-bottom: 40px solid #ff0000;
      }

5.梯形

html 复制代码
<div class="trapezoid"></div>
css 复制代码
 .trapezoid {
        width: 100px;
        height: 0px;
        border: 40px solid transparent;
        border-bottom: 40px solid #ff0000;
      }
相关推荐
qq_12498707531 分钟前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计
Alice-YUE13 分钟前
【css学习笔记8】html5css3新特性
css·笔记·学习
袁煦丞24 分钟前
9.12 Halo的“傻瓜建站魔法”:cpolar内网穿透实验室第637个成功挑战
前端·程序员·远程工作
universe_011 小时前
day27|前端框架学习
前端·笔记
沙尘暴炒饭1 小时前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育1 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
yinuo1 小时前
Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)
前端
沐墨专攻技术1 小时前
二、网页的“化妆师”:从零学习 CSS
css·笔记·学习
yinuo1 小时前
Uni-App跨端实战:支付宝小程序WebView与H5通信全流程解析(02)
前端
木心操作2 小时前
js生成excel表格进阶版
开发语言·javascript·ecmascript