画一个三角形、使用transform/inline-gradient画一条0.5px的直线、不改变形状大小的情况下，给四边形添加一个0.5px的边框

最新推荐文章于 2022-11-20 12:30:04 发布

Top丶super航

最新推荐文章于 2022-11-20 12:30:04 发布

阅读量1.5k

点赞数 10

文章标签： css3 css js

本文链接：https://blog.csdn.net/weixin_44206561/article/details/108087432

版权

今天是准备面试的第四天，面试经常会考到画简单图形，那就让我们深入了解一下画图形

一、画一个三角形

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.app{
				height: 0;
				width: 0;
				border-bottom: 100px solid #000;
				border-left: 100px solid transparent;
				border-right: 100px solid transparent;
			}
		</style>
	</head>
	<body>
		<div class="app"></div>
	</body>
</html>

是不是很困惑为什么加了transparent就可以画出三角形？
那我们就简单解释一下
我们先将给div设置一个height和width，给四个border设置不同的颜色
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.app{
				height: 40px;
				width: 40px;
				border-bottom: 100px solid pink;
				border-left: 100px solid #FD9D21;
				border-right: 100px solid #FF0000;
				border-top: 100px solid #FF6672;
			}
		</style>
	</head>
	<body>
		<div class="app"></div>
	</body>
</html>

是不是感觉自己好像看出了点什么，我们是不是将其中三个border添加一个transparent，是不是就画出了一个三角形啊，但你会发现，如果你是保留的border-bottom的颜色属性，上面会留一段空白，那是由于transparent是将其设置为透明，而不是让其消失，我们少设置一个border试试
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.app{
				height: 0px;
				width: 0px;
				border-bottom: 100px solid pink;
				border-left: 100px solid #FD9D21;
				border-right: 100px solid #FF0000;
			}
		</style>
	</head>
	<body>
		<div class="app"></div>
	</body>
</html>

我们是不是再给左右的border添加一个transparent，是不是就出现了我们希望得到的三角形

二、画一条高为0.5px的直线

因为大部分的浏览器都只支持整数位像素，如果有小数，不同浏览器采取不同处理方式（可能直接舍弃小数位，可能进行四舍五入，或者。。），所以你直接将高设置为0.5px，是不行的

方法一：使用transform

高度设置为1px，然后将css像素缩小一半

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.app{
				height: 1px;
				width: 100px;
				background: red;
				transform: scaleY(0.5);
			}
		</style>
	</head>
	<body>
		<div class="app"></div>
	</body>
</html>

方法二：使用linear-gradient

将盒子的高度设置为1px，通过使用linear-gradient属性，设置为从上面一半为透明，下面一半为红色，从而间接实现高度为0.5px
缺陷：linear-gradient只能设置一条边为0.5px

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.app{
				height: 1px;
				width: 100px;
				background-image: linear-gradient(to bottom, transparent 50%, red 50%);		
			}
		</style>
	</head>
	<body>
		<div class="app"></div>
	</body>
</html>

3、不改变形状大小的情况下，给四边形加一个0.5px的边框

思路：使用after，将宽度和高度设置为原来的两倍，再将边框设置为1px，再将其缩放，就成功的画出来了。你是不是很疑惑为什么要用positon来定位呢？因为像after和before，在类元素使用百分比，它是相对于自身大小而言的，使用position，让其百分比大小是相对于最近的一个带有relative元素的大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.app{
				position: relative;
				height: 100px;
				width: 100px;		
			}
			.app:after{
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				height: 200%;
				width: 200%;
				border: 1px solid #000000;
				transform: scale(0.5);
				transform-origin: 0 0;
			}
		</style>
	</head>
	<body>
		<div class="app"></div>
	</body>
</html>

通过这个小知识点，你是不是很困惑，为什么很多浏览器不支持0.5px，但是支持放缩成0.5px，难道1px不是最小的单位吗？通过这个问题我们就可以引导出物理像素和css像素的区别，慢慢了解到rem自适应和淘宝的flexible的实现。这些我后面会再写博客来解释其中的原理

Top丶super航

关注

10
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
画一个三角形、使用transform/inline-gradient画一条0.5px的直线、不改变形状大小的情况下，给四边形添加一个0.5px的边框

今天是准备面试的第四天，面试经常会考到画简单图形，那就让我们深入了解一下画图形一、画一个三角形<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .app{ height: 0; width: 0; border-bottom: 100px s
复制链接

扫一扫