当前位置: 首页 > news >正文

css画图形

一、效果

在这里插入图片描述

二、代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>实现</title><style lang="scss" scoped>.box {display: flex;padding: 10px;justify-content: space-around;flex-wrap: wrap;}div {margin-top: 10px;}.div1 {width: 0px;height: 0px;border-top: 100px solid transparent;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 100px solid green;}.div2 {width: 0px;height: 0px;border: 100px solid;border-color: transparent transparent blue transparent;}.div3 {width: 200px;height: 200px;background: linear-gradient(45deg, deeppink, yellowgreen);}.div4 {width: 200px;height: 200px;background: linear-gradient(45deg, deeppink, yellowgreen 50%, yellowgreen 50%, deeppink 100%);}.div5 {width: 200px;height: 200px;border-radius: 50%;background-color: pink;}.div6 {width: 100px;height: 200px;border-radius: 100%;border-left: 100px solid red;}.div7 {width: 200px;height: 200px;background-color: yellow;clip-path: polygon(0% 0%, 100% 0%, 0% 100%);}.div8 {width: 200px;height: 200px;background-color: yellow;clip-path: polygon(50% 50%, 0% 100%, 100% 100%);}.div9 {width: 200px;height: 200px;background-color: yellow;clip-path: circle(50%);}.div10 {width: 200px;height: 200px;background-color: yellow;clip-path: circle(50% at 100% 100%);}.div11 {width: 200px;height: 200px;background-color: yellow;clip-path: ellipse(50% 100% at 100% 100%);}.div12 {width: 200px;height: 200px;background-color: yellow;clip-path: path('M 50 50 L 150 50 L 150 150 L 50 150 z');}.div13 {width: 200px;height: 200px;}.star13 {margin-top: 50px;margin-left: 50px;width: 0px;height: 0px;border-style: solid;border-color: red transparent transparent hotpink;border-width: 50px;}.div14 {width: 200px;height: 200px;}.star14 {margin-top: 50px;margin-left: 50px;width: 30px;height: 30px;border-style: solid;border-color: red yellow skyblue yellow;border-width: 40px;}.div15 {width: 200px;height: 200px;}.star15 {margin-top: 50px;margin-left: 50px;width: 30px;height: 30px;border-style: solid;border-color: transparent transparent skyblue transparent;border-width: 40px;}.div16 {width: 600px;height: 150px;display: flex;}</style>
</head>
<body>
<div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="div5"></div><div class="div6"></div><div class="div7"></div><div class="div8"></div><div class="div9"></div><div class="div10"></div><div class="div11"></div><div class="div12"></div><div class="div13"><div class="star13"></div></div><div class="div14"><div class="star14"></div></div><div class="div15"><div class="star15"></div></div><div class="div16"><svg><path d="M 0 50 L 150 50 L 200 75 L 150 100 L 0 100 z" fill="green"></path></svg><svg><path d="M 0 50 L 150 50 L 200 75 L 150 100 L 0 100 z" fill="red"></path></svg><svg><path d="M 0 50 L 150 50 L 200 75 L 150 100 L 0 100 z" fill="gray"></path></svg></div>
</div>
</body>
</html>
http://www.dtcms.com/a/192471.html

相关文章:

  • BUUCTF——web刷题第一页题解
  • 漂亮的收款打赏要饭网HTML页面源码
  • leetcode-hot-100 (子串)
  • Apple Vision Pro空间视频创作革命:从180度叙事到沉浸式语法的重构——《Adventure》系列幕后技术深度解析
  • [c++项目]云备份项目测试
  • 抢购Python代码示例与技术解析
  • Java中的设计模式
  • C++:字符数组与字符串指针变量的大小
  • 35页AI应用PPT《DeepSeek如何赋能职场应用》DeepSeek本地化部署与应用案例合集
  • 【论文阅读】BEVFormer
  • P8803 [蓝桥杯 2022 国 B] 费用报销
  • TypeScript中文文档
  • 【Java项目脚手架系列】第七篇:Spring Boot + Redis项目脚手架
  • 配置别名路径 @
  • ArcGIS切片方案记录bundle文件
  • 机器学习笔记3
  • 【iOS】alloc的实际流程
  • 106. 从中序与后序遍历序列构造二叉树
  • 本地化部署HomeAssistant语音助手并接入DeepSeek
  • 波导模型(表面等离激元、石墨烯等)本征模式分析、各种类型波导传输效率求解
  • JAVA数组题(7)
  • STL - stack 和 queue 及容器适配器模式的介绍
  • C++11(2)
  • 大语言模型三大演进方向:记忆增强、工具集成与多模态突破
  • 插件双更新:LeetCode 刷题支持正式上线,JetBrains IDE 插件持续升级!
  • 《从零开始入门递归算法:搜索与回溯的核心思想 + 剑指Offer+leetcode高频面试题实战(含可视化图解)》​
  • 机器学习第十三讲:独热编码 → 把“红黄蓝“颜色变成001/010/100的数字格式
  • 将.pt文件执行图像比对
  • 赛博放生:用数字技术重构心灵仪式
  • 跨系统数据烟囱如何破局?豪森智源HSMES重构制造协同新范式‌