css实现三角形，五角星，爱心等原理

最新推荐文章于 2023-05-25 16:24:48 发布
最新推荐文章于 2023-05-25 16:24:48 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： html/css布局 文章标签： css 伪元素 三角形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34954786/article/details/78605420
版权

将以下代码直接运行即可看到各种效果以及实现原理！！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三角形变换</title>
		<style>
			.zuoyouxia{
				width: 0;
				height: 0;
				border-bottom: 100px solid red;
				border-left: 50px solid gray;
				border-right: 50px solid green;
			}
			.zfx{
				width: 0px;
				height: 0px;
				border-top:50px solid red;
				border-bottom: 50px solid green;
				border-right: 50px solid pink;
				border-left: 50px solid lightblue;
			}
			.shangzuo{
				width: 0px;
				height: 0px;
				border-top:50px solid red;
				border-left: 50px solid lightblue;
			}
			.touming{
				width: 0;
				height: 0;
				border-top: 50px solid red;
				border-left: 50px solid red;
				border-bottom: 50px solid transparent;
				border-right: 50px solid transparent;
			}
			.sixstar{
				width: 0;
				height: 0;
				border-right: 50px solid transparent;
				border-left: 50px solid transparent;
				border-bottom: 100px solid red;
				position: relative;
			}
			.sixstar: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: "";
			}
			.fivestar{
				width: 0;
				height: 0;
				border-bottom: 70px solid #FF0000;
				border-right: 100px solid transparent;
				border-left: 100px solid transparent;
                                position: relative;
                                transform: rotate(35deg);
			}
			.fivestar:before{
				width: 0;
				height: 0;
				border-bottom: 80px solid green;
				border-right: 30px solid transparent;
				border-left: 30px solid transparent;
				content: "";
				position: absolute;
				transform: rotate(-35deg);
				top:-45px;
				left: -65px;
			}
			.fivestar:after{
				width: 0;
				height: 0;
				border-bottom: 70px solid blue;
				border-right: 100px solid transparent;
				border-left: 100px solid transparent;
                                position: absolute;
                                transform: rotate(-70deg);
                                content: "";
                                top:3px;
                                left: -105px;
			}
			.shidouren{
				width: 0;
				height: 0;
				border-top:60px solid red;
				border-left: 60px solid red;
				border-bottom: 60px solid red;
				border-right: 60px solid transparent;
				border-top-left-radius: 60px;
				border-top-right-radius: 60px;
				border-bottom-left-radius: 60px;
				border-bottom-right-radius: 60px;
			}
			.main{
			  transform: rotate(45deg);
			   position: absolute;
			   margin-top:50px;
			}
			.disc1{
				width: 100px;
				height: 100px;
				border:1px solid red;
				background: red;
				border-radius: 50%;
				float: left;
			}
			.disc2{
				width: 100px;
				height: 100px;
				border:1px solid red;
			        border-radius: 50%;
			        float: left;
			        background: red;
			        position: relative;
			        right: 52px;
			        top:-50px;
			}
			.square{
				width: 100px;
				height: 100px;
				background: red;
				float: left;
				position: relative;
				right: 152px;
				top:2px;
			}
		</style>
	</head>
	<body>
		<h3>当3个边框都设置的时候</h3>
		<!--当宽高都为0时，左右下设置边框100，50，50,也是一个正方形，当数量不相等时，依据多数-->
		<div class="zuoyouxia"></div>
		<br>
		<!--当宽高都为0时，设置边框都为20px,就是一个正方形,并且宽度变为原来的两倍-->
		<h3>当4个边框都设置的时候，边框才会是两倍</h3>
		<div class="zfx"></div><Br>
		<!--当宽高都为0时，上，左设置边框都为20px,宽度就是边框的宽度，也是一个正方形-->
		<h3>只设置两边的时候</h3>
		<div class="shangzuo"></div><Br>
		<!--当宽高都为0时，上下左右设置边框都为50px,并且右下为透明，就是一个直角三角形-->
		<h3>当4个边框都设置的时候，边框才会是两倍，这里透明了右下</h3>
		<div class="touming"></div>
		<h3>六角形:一个向上三角形和一个向下三角形，通过top通过left移动重叠形成</h3>
		<div class="sixstar"></div><Br>
		<h3>五角星：第一个红色通过旋转35度，第二个绿色旋转-35度,第三个蓝色旋转-70度</h3>
		<div class="fivestar"></div><Br>
		<h3>食豆人：上下左右，右为透明，并且设置弧度</h3>
		<div class="shidouren"></div><Br>
		<h3>爱心：两个圆形和一个正方形</h3>
		<div class="main">
			<div class="disc1"></div>
			<div class="disc2"></div>
			<div class="square"></div>
		</div>
	</body>
</html>



有只猫七
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现鼠标滑过五角星高亮效果
09-24
本文将深入探讨如何使用CSS（层叠样式表）来实现鼠标滑过时五角星高亮的效果。 首先，我们要理解CSS的基本概念。CSS是一种样式语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。它定义了页面...
用css画五角星
最新发布
rose999ying的博客
08-10 1461
css技巧
css实现三角形和五角星
weixin_52099241的博客
05-06 543
css三角形 css五角星
css3画一个五角星 ，三角形，圆形
yinge0508的博客
05-25 486
【代码】css3画一个五角星 ，三角形，圆形。
css-左三角
qq_41670147的博客
10-31 856
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
用css实现三角形效果
u014611599的博客
10-09 192
.m{margin:20px; float:left; width:0; height:0; border:solid transparent; border-width:12px; } .left{border-left-color:#000;} .right{border-right-color:red;} .top{border-top-color:blue;
css实现三角形.zip
03-06
CSS三角形的基本原理是利用边框（border）和透明度。通过将一个元素的三个边框设置为透明，然后调整另一个边框的宽度和颜色，可以创造出一个看起来像三角形的效果。例如，如果一个元素的宽度和高度都为0，但一个...
CSS画出各种三角形如等边三角形
09-25
下面的代码将演示三角形如何产生的以及等边三角形画法，喜欢css的朋友可以参考下，希望对大家学习css有所帮助
CSS绘制三角形的实现代码(border法)
09-22
在本文中，我们将深入探讨如何使用CSS中的`border`属性来绘制三角形。这种方法基于CSS盒模型中的边框理论，通过巧妙地调整边框宽度和颜色来创造出各种形状的三角形。 首先，理解CSS边框的基本概念是关键。通常，...
css实现五角星
banou8086的博客
11-17 2910
1、创建一个div,设置样式如下 div{ width: 50px; height: 50px; border-top: 50px solid red; border-bottom: 50px solid yellow; border-left: 50px ...
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等
06-12
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等
css实现六角星
qq_39039128的博客
09-23 1241
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
DW制作三角形
weixin_57762662的博客
10-18 415
​​​​​​ 我们打开DW，然后按下CTRL+N键新建一个html文档 首先，我们在body中间打上div 接下来在head里打上一个style标签给div设置属性 我们给div设置上属性 接下来观看效果 当然，我们可以把bottom设置成其他方向，可以变成其他方向的三角形，也可以设置多一个方向变成直角三角形 更改后效果 ...
DW制作小三角型教程
weixin_57762627的博客
08-24 1122
1、首先先打一个div 2、然后创建一个css层叠样式表 3、用link加tab键把css外部样式引进来。 4、到css样式表里设置样式。 5、给它设置个边框。 6、给它宽高设置为0px。 7、给边框四个角设置颜色。 8、效果如下。 9、给它设置transparent属性值；使其颜色变为透明色。 10、若只想要向下的三角型，只需要把左右下边的样式删掉就好...
制作三角形
shi_jia233的博客
10-11 384
1打开DW，CTRL+n新建一个html 2在body加上div 3在head里加上style再给div设置属性 4设置div属性 5观看效果 6可以把bottom设置成其他方向可以变成其他方向的三角形也可以设置多一个方向变成直角三角形， 7观看效果 ...
css样式写三角形
VibMike的博客
09-08 646
1、首先给页面写入一个div 2、写一个内部样式标签 3、给div写一个id（类也行，写多个同样三角形就用类） 4、style选择这个id 5、写一个边框，边框大小随意 6、给边框一个实线 7、给边框设置一个颜色，要三角形向上就给下面写颜色（向下面就是给上面写，左右也一样，反着来） 8、剩下的三个边设置成透明色，默认顺序是上右下左，所以我们按照这个方向来写 9、最后不要忘记设置浮动，向左或右随意 10、F12预览 ...
DW前端代码汇总
HCTLTCT的博客
04-29 1万+
DW前端代码汇总 ==============================前端代码============================ ------------------------------------*标签*--------------------------------- <button></button>--按钮标签 <ul></ul>---段落标签 <u></u>--下划线 <link r...
使用css实现五角星
HwH66998的博客
11-27 1371
大五角星 通过small名class创建div .small-all{ display: flex; margin:1rem 13%; } .small { border-color: #7d7d7d transparent transparent transparent; border-style: solid; border-top-width: 9.375px; border-right-w...
HTML 五角星 -- CSS
热门推荐
随遇而安的博客
02-19 1万+
在HTML页面中显示wujiao
css实现三角形
05-26
可以使用CSS的border属性来实现三角形。具体方法如下： 1. 先创建一个正方形的div元素，设置宽度和高度相等。 2. 设置border属性，将三条边的颜色设为透明，只设置一个边的颜色为需要的颜色，边框大小可以根据需要自行调整。 3. 将另外两条边设置为宽度为0，颜色为透明。 4. 根据需要调整div元素的位置和旋转角度，即可得到所需的三角形。 下面是一个例子： ```html <div class="triangle"></div> ``` ```css .triangle { width: 0; height: 0; border-top: 50px solid blue; /* 实现一个向下的三角形 */ border-left: 25px solid transparent; border-right: 25px solid transparent; } ``` 可以通过调整border-top的宽度和颜色，以及border-left和border-right的宽度，来实现不同方向和大小的三角形。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值