【CSS】绘制各种图形实例

最新推荐文章于 2024-06-18 10:00:00 发布
最新推荐文章于 2024-06-18 10:00:00 发布
阅读量601 收藏
点赞数 1
分类专栏： CSS 文章标签： css

这里写图片描述


【CSS】绘制各种图形实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0;" name="viewport" />
<title>纯CSS绘制各种图形实例</title>
<style>
/*css reset */
body { margin: 0; background: #eeffe5;}
div { margin-top: 100px;}
div:hover { box-shadow: 0 0 8px #d5d5d5; }
.wrapper {
    width: 80%;
    margin: 0 auto;
    box-shadow: none !important;
}

.zheng {
    width: 100px;
    height: 100px;
    background: #f33;
}
.yuan {
    width: 100px;
    height: 100px;
    background: #f33;
    border-radius: 55%;
}
.tuo {
    width: 150px;
    height: 100px;
    background: #f33;
    border-radius: 55%;
}
.dengyao△1 {
    width: 0;
    height: 0;
    border: 70px solid transparent;
    border-bottom: 70px solid #f33;
}
.dengyao△2 {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-left: 100px solid #f33;
}
.dengyao△3 {
    width: 0;
    height: 0;
    border-top: 100px solid #f33;
    border-right: 100px solid transparent;
}
.dengyao△4 {
    width: 0;
    height: 0;
    border: 70px solid transparent;
    border-top: 70px solid #f33;
}
.△5 {
    width: 0;
    height: 0;
    border: 70px solid transparent;
    border-left: 100px solid #f33;
}
.△6 {
    width: 0;
    height: 0;
    border: 60px solid transparent;
    border-left: 80px solid #f33;
    border-right: 80px solid #f33;
}
.pingxin {
    width: 140px;
    height: 80px;
    background: #f33;
    -moz-transform: skew(13deg,0deg);
    -webkit-transform: skew(13deg,0deg);
    -ms-transform: skew(13deg,0deg); /*ie9*/
    transform: skew(13deg,0deg);
}
.tixin {
    width: 100px;
    height: 0;
    border: 30px solid transparent;
    border-bottom: 80px solid #f33;
}
.tixin2 {
    width: 100px;
    height: 0;
    border: 30px solid transparent;
    border-top: 80px solid #f33;
}
.yuanjiao {
    width: 100px;
    height: 100px;
    background: #f33;
    border-radius: 10px;
}
.yuanjiao2 {
    width: 100px;
    height: 100px;
    background: #f33;
    border-radius: 20px 0 20px 0;
}
.yuanjiao3 {
    width: 100px;
    height: 100px;
    background: #f33;
    border-radius: 0 20px 0 20px;
}
.yuanjiao4 {
    width: 100px;
    height: 100px;
    background: #f33;
    border-radius: 40px 40px 40px 40px / 20px 20px 20px 20px;
}
.yuanjiao5 {
    width: 100px;
    height: 100px;
    background: #f33;
    border-radius:  25px 25px 25px 25px / 40px 40px 40px 40px;
}
.shuqian1 {
    width: 150px;
    height: 0;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #f33;
}
.shuqian2 {
    width: 150px;
    height: 0;
    border-top: 20px solid #f33;
    border-bottom: 20px solid #f33;
    border-right: 30px solid transparent;
} 
.huan1 {
    width: 100px;
    height: 100px;
    background: transparent;
    border: 7px solid #f33;
    border-radius: 55%;
}
.huan2 {
    width: 200px;
    height: 100px;
    background: transparent;
    border: 5px solid #f33;
    border-radius: 10px;
}
.heart { 
    position: relative; 
    width: 100px; 
    height: 90px;
}
.heart:before,.heart:after { 
    position: absolute; 
    content: ""; 
    left: 50px; 
    top: 0; 
    width: 50px; 
    height: 80px; 
    background: #f33; 
    -moz-border-radius: 50px 50px 0 0; 
    border-radius: 50px 50px 0 0; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -ms-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; /*css终极hack*/
}
.heart:after { 
    left: 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%; 
    -moz-transform-origin: 100% 100%; 
    -ms-transform-origin: 100% 100%; 
    -o-transform-origin: 100% 100%; 
    transform-origin :100% 100%;
}
.talkbubble { 
    width: 120px; 
    height: 80px; 
    background: #f33; 
    position: relative; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px;
}
.talkbubble:before { 
    content:""; 
    position: absolute; 
    right: 100%; 
    top: 26px; 
    width: 0; 
    height: 0; 
    border-top: 13px solid transparent; 
    border-right: 26px solid #f33; 
    border-bottom: 13px solid transparent;
}
.taiji {
    width: 96px;
    height: 48px;
    background: #f8f8f8;
    border-color: #f33;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
.taiji:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #f8f8f8;
    border: 18px solid #f33;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
.taiji:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #f33;
    border: 18px solid #f8f8f8;
    border-radius:100%;
    width: 12px;
    height: 12px;
}
.moon {
  width: 150px;
  height: 150px;
  border-radius: 55%;
  box-shadow: 15px 15px 0 1px #f33;
}
.search {
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 55%;
    border: 2px solid #f33;
    position: relative;
    box-sizing: content-box;
}
.search:before {
    display: inline-block;
    content: '';
    width: 22px;
    height: 3px;
    background: #f33;
    position: absolute;
    top: 41px;
    left: 31px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    box-sizing: content-box;
}
.btn-submit {
    display: block;
    width: 42px;
    height: 35px;
    position: relative;
}
.btn-submit:before {
    display: block;
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid #999;
    border-radius: 20px;
    background: transparent; 
    position: absolute;
    left: 10px;
    top: 7px;
    box-sizing: content-box;
}
.btn-submit:after {
    display: block;
    content: '';
    width: 10px;
    height: 2px;
    background: #999;
    position: absolute;
    top: 22px;
    left: 21px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    box-sizing: content-box;
}
.wujiao {
    margin:50px 0;
    position:relative;
    display:block;
    color:#f33;
    width:0px;
    height:0px;
    border-right:100px solid transparent;
    border-bottom:70px solid #f33;
    border-left:100px solid transparent;
    -moz-transform:rotate(35deg);
    -webkit-transform:rotate(35deg);
    -ms-transform:rotate(35deg);
    -o-transform:rotate(35deg);
}
.wujiao:before {
    border-bottom:80px solid #f33;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    position:absolute;
    height:0;
    width:0;
    top:-45px;
    left:-65px;
    display:block;
    content:'';
    -webkit-transform:rotate(-35deg);
    -moz-transform:rotate(-35deg);
    -ms-transform:rotate(-35deg);
    -o-transform:rotate(-35deg);
}
.wujiao:after {
    position:absolute;
    display:block;
    color:#f33;
    top:3px;
    left:-105px;
    width:0px;
    height:0px;
    border-right:100px solid transparent;
    border-bottom:70px solid #f33;
    border-left:100px solid transparent;
    -webkit-transform:rotate(-70deg);
    -moz-transform:rotate(-70deg);
    -ms-transform:rotate(-70deg);
    -o-transform:rotate(-70deg);
    content:'';
}
.wubian {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #f33 transparent;
}
.wubian:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #f33;
}
.yuanque {
    width: 0;
    height: 0;
    border: 50px solid #f33;
    border-radius: 55%;
    border-right: 50px solid transparent;
}
</style>
</head>
<body>
    <div class="wrapper">
        <div class="zheng" title="正方形"></div>
        <div class="yuan" title="圆形"></div>
        <div class="tuo" title="椭圆"></div>
        <div class="dengyao△1" title="等腰直角三角形1"></div>
        <div class="dengyao△2" title="等腰直角三角形2"></div>
        <div class="dengyao△3" title="等腰直角三角形3"></div>
        <div class="dengyao△4" title="等腰直角三角形4"></div>
        <div class="△5"></div>
        <div class="△6"></div>
        <div class="pingxin"></div>
        <div class="tixin"></div>
        <div class="tixin2"></div>
        <div class="yuanjiao"></div>
        <div class="yuanjiao2"></div>
        <div class="yuanjiao3"></div>
        <div class="yuanjiao4"></div>
        <div class="yuanjiao5"></div>
        <div class="shuqian1"></div>
        <div class="shuqian2"></div>
        <div class="moon"></div>
        <div class="huan1"></div>
        <div class="huan2"></div>
        <div class="heart"></div>
        <div class="talkbubble"></div>
        <div class="taiji"></div>
        <div class="search"></div>
        <div class="btn-submit"></div>
        <div class="wujiao"></div>
        <div class="wubian"></div>
        <div class="yuanque"></div>
        <div class=""></div>
    </div>
</body>
</html>
邹大叔
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用CSS绘制最常见的40种形状和图形，0基础前端开发
2401_84092143的博客
04-06 843
前端校招精编面试解析大全点击这里免费获取完整版pdf查看女性身体可视化修身工具前端校招精编面试解析大全点击这里免费获取完整版pdf查看。
利用CSS进行各种图形的绘制
骑着毛驴的小猴子
06-30 313
<body> <div id="square"></div> <!--正方形--> <div id="rectangle"></div> <!--长方形--> <div id="circle"></div> <!--圆--> <div id="oval"></div> <!
CSS画几种图形的方法
老电影故事的博客
04-01 1002
clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的 URL 定义的路径或者外部 SVG 的路径。使用 border 实现三角形应该是大部分人都掌握的，也是各种面经中经常出现的，利用了高宽为零的容器及透明的 border 实现。使用伪元素在一个正方形的元素上创建一个完全重叠的圆形，并使用transform属性将其缩小到所需大小。将一个正方形的元素的border-radius属性设置为50%即可将其变为一个圆形。
css 常见图形绘制
似水流年QC的博客
09-08 1458
css 常见图形绘制。
前端面试必学基础！用CSS画7大基本图形
最新发布
Web面试那些事儿的博客
06-18 818
如果你现在正在找工作，可以私信“web”或者直接添加下方小助理进群领取前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集，和p8大佬一起交流。
css绘制常见的形状和图案
木木
08-20 1934
1.矩形 .square{ width: 100px; height: 50px; background: red } 2. 正方形 .rectangle{ width: 100px; height: ...
纯CSS绘制图形的三种方法
chen__cheng的博客
08-17 3974
绘制图形 第一种方式：使用裁剪可视区的方式显示 clip-path 该属性使用裁剪方式创建元素的可显示区域，区域内的显示，区域外的不显示。 比如：构建一个三角形 <div class="mybox"></div> <style> .mybox { width: 100px; height: 100px; background-color: yellow; clip-path: polygon(0% 0%,1
CSS各种图形绘制
NiceGY
07-21 1202
CSS各种图形绘制 /*绘正方形*/ .square{ width:100px; height:100px; } /*绘长方形*/ .retangle{ width:200px; height:100px; }
CSS_shape.zip_CSS 绘制图形
09-21
本压缩包“CSS_shape.zip”聚焦于利用CSS来绘制各种有趣的图形，使得网页设计更加丰富多彩。通过直接复制和使用提供的代码，你可以快速地在自己的项目中实现这些图形。 首先，`css_shape.html`是主示例文件，它可能...
CSS3绘制各种图形图标样式特效.zip
11-17
总的来说，这个压缩包文件的内容涵盖了CSS3绘制图形和图标的各种技巧，包括但不限于形状创建、变换、颜色处理、渐变、动画以及与JavaScript和HTML5的协同工作。通过学习和实践这些案例，开发者可以提升自己的前端...
绘制各种图形的资源
09-25
在IT行业中，图形绘制是一项至关重要的技能，无论是在软件开发、数据分析、网页设计还是游戏制作等领域，都需要用到各种图形的绘制。这个名为"绘制各种图形的资源"的压缩包，很可能包含了一系列用于创建和编辑图形的...
html5css3实现的在线画图板工具
05-14
HTML5+CSS3实现的在线画图板工具，提供给有兴趣的童鞋参考。
纯CSS绘制三角形（各种角度）
10-26
CSS三角形绘制方法，学会了这个，其它的也就简单。
html5+css3绘图例子
02-02
清华大学教授写的一个html5+css3的绘图例题。
css3.0 图形构成实例练习一
09-25
CSS3.0是 Cascading Style Sheets (层叠样式...通过调整这些属性的值，你可以创建出各种不同的图形，从而进一步理解CSS3在网页设计中的强大能力。不断实践和实验，你将能够利用CSS3创建出更多复杂而美观的图形和布局。
CSS3绘制卡通小熊图形特效.zip
10-14
总结来说，"CSS3绘制卡通小熊图形特效.zip"是一个关于使用现代CSS技术创造动态、互动的卡通图形的实例，适合前端开发者学习和实践，提升他们的CSS技能，同时也提供了一个有趣的方式去理解和掌握CSS3的强大功能。
[转]CSS绘制常见的40种形状和图形
Admans的专栏
09-17 340
这里有一些看似很简单却非常强大的纯css绘制的图形，有常见的三角形，圆形，矩形还有各种常见的多边形，甚至是网站小图标。在这里分享给大家。
css一些特殊的图形,css如何绘制特殊图形的方法示例
weixin_28725037的博客
08-03 504
一、三角形border边框设置代码：width: 300px;height: 300px;background: red;border: 40px solid black;border-left-color: blue;border-bottom-color: yellow;border-right-color: pink;border-top-color: #008800;花特殊图形的时候需要将...
CSS 实现：常见几何图形绘制
薛定谔的猫-前端领域
10-04 1316
三角形 border实现 首先将元素内容宽高设置为0，设置每个border宽和样式后是四个三角形。 等边三角形：通过设置border宽度比为：指定方向 / 非指定方向 = 即可。 角落三角形：只设置相邻两个border的宽度，且其中一个设置为transparent。 方法二：正六边形分成三个宽高相同的div，然后使用定位以及css3 transform:rotate分别向左右旋转60deg形成正六边形 方法一：把正六边形分成三部分，左中右分别是：before 伪元素部分，div 部分，after
CSS3绘制卡通图案实例：代码与兼容性解析
本文档提供了一个使用HTML和CSS3技术来绘制基本卡通图案的实例教程。作者分享了一种创建纯HTML和CSS实现的阿童木头像的方法，通过CSS3的多种特性来达到艺术效果。主要内容包括以下几个知识点： 1. **HTML结构**： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值