css通过 border 、border-radius 、transform，实现各种图形。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css图形实现</title><style type="text/css">div{margin:20px;}/*css图形变换原理*/#border-Style-w{width: 100px;height: 100px;border-top:100px solid #0f0;border-right:100px solid #f00;border-bottom:100px solid #f0f;border-left:100px solid #00f;}#border-Style{width: 0;height: 0;position: relative;border-top:100px solid #0f0;border-right:100px solid #f00;border-bottom:100px solid #f0f;border-left:100px solid #00f;}#border-Style:before{content: '';width: 0;height: 0;border-left:1px solid #000;border-top:110px solid #000;border-bottom:110px solid #000;}#border-Style:after{content: '';width: 0;height: 0;position: absolute;left:-105px;top:0;border-left:110px solid #000;border-top:1px solid #000;border-right:110px solid #000;}/*正方形*/#square{width: 100px;height: 100px;background-color:red;}/*矩形*/#rectangle{width: 200px;height: 100px;background-color: red;}/*圆*/#cricle{width: 100px;height: 100px;background-color: red;border-radius:50%;}/*椭圆*/#oval{width: 200px;height: 100px;background-color: red;border-radius:100px/50px;//????}/*上三角*/#triangle-Up{width: 0;height: 0;border-bottom: 40px solid red;border-left:20px solid transparent;border-right:20px solid transparent;}/*下三角*/#triangle-Down{width: 0;height: 0;border-top:40px solid red;border-left:20px solid transparent;border-right:20px solid transparent;}/*左下三角*/#triangle-BottomLeft{width: 0;height: 0;border-bottom: 40px solid red;border-right:40px solid transparent;}/*右下三角*/#triangle-BottomRight{width: 0;height: 0;border-bottom:40px solid red;border-left:40px solid transparent;}/*左上三角*/#triangle-TopLeft{width: 0;height: 0;border-top:40px solid red;border-right:40px solid transparent;}/*右上三角*/#triangle-TopRight{width: 0;height: 0;border-top:40px solid red;border-left:40px solid transparent;}/*旋转箭头*/#curvedarrow{position:relative;width: 0;height: 0;border-top:9px solid transparent;border-right:9px solid red;transform:rotate(10deg);}#curvedarrow:after{content:"";position:absolute;border:0 solid transparent;border-top:3px solid red;border-radius:20px 0 0 0;top:-12px;left:-9px;width: 12px;height: 12px;transform:rotate(45deg);}/*旋转箭头*/#curvedarrow01{position: relative;width: 0;height: 0;border-bottom: 9px solid red;border-right:9px solid transparent;transform:rotate(65deg);}#curvedarrow01:after{content:"";position:absolute;border:0 solid transparent;border-top:3px solid red;border-radius:20px 0 0 0;width: 12px;height: 12px;top:-10px;left:-2px;transform:rotate(135deg);}/*旋转箭头*/#curvedarrow02{position: relative;width: 0;height: 0;border-top:9px solid red;border-right:9px solid transparent;transform: rotate(15deg);}#curvedarrow02:after{content:"";position:absolute;border:0 solid transparent;border-top:3px solid red;border-radius:20px 0 0 0;width: 12px;height: 12px;top:-15px;left:4px;transform:rotate(215deg);}/*梯形*/#trapezoid{width: 100px;height: 0;border-bottom: 40px solid red;border-left:40px solid transparent;border-right:40px solid transparent;}/*平行四边形*/#parallelogram{width: 200px;height: 100px;transform:skew(20deg);background-color: red;}/*六角形*/#star-Six{width: 0;height: 0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid red;position:relative;}#star-Six:after{width: 0;height: 0;border-top:100px solid red;border-right:50px solid transparent;border-left:50px solid transparent;position:absolute;top:30px;left:-50px;content:"";}/*五角星*/#star-Five{margin: 50px 0;position: relative;display:block;color:red;width: 0;height: 0;border-right:100px solid transparent;border-bottom:70px solid red;border-left:100px solid transparent;transform:rotate(35deg);}#star-Five:before{border-bottom:80px solid red;border-left:30px solid transparent;border-right:30px solid transparent;position:absolute;height: 0;width: 0;top:-45px;left:-65px;display: block;content:"";transform:rotate(-35deg);}#star-Five:after{position:absolute;display:block;color:red;top:3px;left:-105px;width: 0;height: 0;border-right:100px solid transparent;border-bottom:70px solid red;border-left:100px solid transparent;transform:rotate(-70deg);content:"";}/*五角形*/#pentagon{position:absolute;width: 54px;border-width:50px 18px 0;border-style:solid;border-color:red transparent;}#pentagon:before{content:"";position:absolute;height: 0;width: 0;top:-85px;left:-18px;border-width:0 45px 35px;border-style:solid;border-color:transparent transparent red;}/*六角形*/#hexagon{margin: 200px 0 0 0;width: 100px;height: 55px;background-color: red;position:relative;}#hexagon:before{content:'';position:absolute;top:-25px;left:0;width:0;height: 0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:25px solid red;}#hexagon:after{content:'';position:absolute;bottom:-25px;left:0;width: 0;height: 0;border-left:50px solid transparent;border-right:50px solid transparent;border-top:25px solid red;}/*八边形*/#octagon{margin: 100px 0 0 0;width: 100px;height: 100px;background-color: red;position:relative;}#octagon:before{content:'';position:absolute;top:0;left:0;border-bottom:29px solid red;border-left:29px solid #fff;border-right:29px solid #fff;width: 42px;height: 0;}#octagon:after{content:'';position:absolute;bottom:0;left:0;border-top:29px solid red;border-left:29px solid #fff;border-right:29px solid #fff;width:42px;height: 0;}/*心形*/#heart{position:relative;width:100px;height: 90px;}#heart:before,#heart:after{position:absolute;content:'';left:50px;top:0;width: 50px;height: 80px;background-color: red;border-radius:50px 50px 0 0;transform:rotate(-45deg);transform-origin:0 100%;}#heart:after{left:0;transform:rotate(45deg);transform-origin:100% 100%;}/*无穷大*/#infinity{position: relative;width: 212px;height: 100px;}#infinity:before,#infinity:after{content:'';position:absolute;top:0;left:0;width: 60px;height: 60px;border:20px solid red;border-radius:50px 50px 0 50px;transform:rotate(-45deg);}#infinity:after{left:auto;right:0;border-radius: 50px 50px 50px 0;transform:rotate(45deg);}/*月亮*/#moon{width: 80px;height: 80px;border-radius:50%;box-shadow:15px 15px 0 0 red;}/*圆锥*/#cone{width: 0;height: 0;border-left: 70px solid transparent;border-right: 70px solid transparent;border-top:100px solid red;border-radius:50%;}/*太急*/#taiji{width: 96px;height: 48px;background-color: #fff;border:2px solid #000;border-bottom-width: 50px;border-radius:100%;position:relative;}#taiji:before{content:'';position:absolute;top:50%;left:0;background-color: #fff;border:18px solid #000;border-radius:100%;width: 12px;height: 12px;}#taiji:after{content:'';position:absolute;top:50%;left:50%;background-color:#000;border:18px solid #fff;border-radius:100%;width: 12px;height: 12px;        }/*对话框*/#talkbubble{width: 120px;height: 80px;background-color: #fff;position:relative;border-radius:10px;border:2px solid #ccc;}#talkbubble:after{content:'';position:absolute;width: 0;height: 0;border-top:13px solid transparent;border-right:26px solid #ccc;border-bottom: 13px solid transparent;right: 100%;top:26px;}</style>
</head>
<body><div id="border-Style-w"></div><div id="border-Style"></div><div id="square"></div><div id="rectangle"></div><div id="cricle"></div><div id="oval"></div><div id="triangle-Up"></div><div id="triangle-Down"></div><div id="triangle-BottomLeft"></div><div id="triangle-BottomRight"></div><div id="triangle-TopLeft"></div><div id="triangle-TopRight"></div><div id="curvedarrow"></div><div id="curvedarrow01"></div><div id="curvedarrow02"></div><div id="trapezoid"></div><div id="parallelogram"></div><div id="star-Six"></div><div id="star-Five"></div><div id="pentagon"></div><div id="hexagon"></div><div id="octagon"></div><div id="heart"></div><div id="infinity"></div><div id="moon"></div><div id="cone"></div><div id="taiji"></div><div id="talkbubble"></div>
</body>
</html>

　　

转载于:https://www.cnblogs.com/lyswwb/p/7045966.html

有趣的css图形实现相关推荐

  1. 奇妙的 CSS shapes(CSS图形)

    CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outsid ...

  2. 谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线

    谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线 原文:谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线 开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什 ...

  3. 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  4. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. 谈谈一些有趣的CSS题目（十七）-- 不可思议的颜色混合模式 mix-blend-mode

    谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode 原文:谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode 开本系列, ...

  6. 谈谈一些有趣的CSS题目（十六）-- 奇妙的 background-clip: text

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. 谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. html背景只向x轴扩散,有趣的css—简单的下雨效果2.0版

    有趣的css-简单的下雨效果2.0版 推荐 原创 Fatman_2021-05-18 13:37:36©著作权 文章标签 css 阅读数 1119 ©著作权归作者所有:来自51CTO博客作者Fatma ...

最新文章

  1. 【图文解析】带你看清全球机器人四大家族现状，四家企业瓜分中国57%、全球50%的市场份额...
  2. JVM（六）为什么新生代有两个Survivor分区？
  3. 股价相对于转股价溢价的时候，可转债就是折价状态。这就意味着只要正股保持目前的价格，赚钱的概率较高。...
  4. MFC开发IM-第三篇、资源视图--显示在另一个编辑器中打开
  5. python代码转换为pytorch_python基础教程Pytorch之Tensor和Numpy之间的转换的实现方法...
  6. 用计算机字符写名字,NSIS：把计算机名转换为大写或小写字符
  7. 1、Spring入门
  8. php 字母加1,PHP语法（1）
  9. 第九十九章 SQL函数 NOW
  10. 动态规划 DEMO 投资分配问题
  11. Delphi WebBrowser与网页交互
  12. 机器学习——DEAP数据集
  13. 用hidusb.sys还是winusb.sys读写一个只有In/Out Interrupt Endpoints的STM32 USB设备？
  14. 阿里 java 开发手册
  15. 预测分析：R语言实现2.4　评估线性回归模型
  16. 检测并替换数据中的离群值——filloutliers函数的MATLAB实现
  17. 处理口罩图片数据（yolov5）中碰到的问题（macOS）
  18. 来了！CDEC2022全国六城首站——深圳！
  19. 演化计算基准函数(Python版)
  20. 安卓Android开发：使用AudioRecord录音、将录音保存为wav文件、使用AudioTrack保存录音

热门文章

  1. HEVC-CABAC
  2. 15.3 动态类型安全
  3. android高德自定义图标,Android 高德地图显示在线图标
  4. csharp attributes
  5. struts 依赖包
  6. Java数据结构——2-3树
  7. win10系统U盘启动
  8. 四、MyBatis-映射文件
  9. javascript forEach无法break，使用every代替
  10. oracle 11g禁用和强制direct path read