CSS实现三角形效果

最新推荐文章于 2022-11-28 17:35:02 发布

夏尔の

最新推荐文章于 2022-11-28 17:35:02 发布

阅读量280

点赞数 1

文章标签： CSS三角形

本文链接：https://blog.csdn.net/qq_16371909/article/details/79139427

版权

导语：2016年，我说“我会CSS”。那会觉得自己对CSS的浮动，定位以及各种常用的属性算是掌握的比较透彻了，工作时我不用写几行代码就刷新浏览器看效果，而是每写一行代码在脑海中自动浮现出效果图，并准确的知道我接下来该写什么属性，写完属性会带来哪些变化。有一种下笔如有神的感觉！

工作两年，新的技术层出不穷，项目里面常写的CSS并没有太大变动，自己的主要精力都集中在JS框架上。所以我想把自己知道的一些CSS技巧记录一下，防止遗忘。

核心：对我而言，只要是能用CSS实现的，绝不用图片替代！

主题：用CSS画三角形

效果图：

作为一个90后，我说话怎么这么古板，不行，我要来一张表情包，嘤嘤嘤！

主要利用的是CSS的“transparent属性”，通过控制边框的大小以及颜色透明来控制三角形的大小和角度。关于border更详细的表现自己去查吧，网上很多，写的比我写的好，我直接贴代码！

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>CSS画三角形</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			.title {
				font-weight: normal;
			}
			
			.triangle-up {
				width: 0;
				height: 0;
				border-right: 50px solid transparent;
				border-left: 50px solid transparent;
				border-bottom: 75px solid #0088CC;
			}
			
			.triangle-right {
				width: 0;
				height: 0;
				border-top: 50px solid transparent;
				border-bottom: 50px solid transparent;
				border-left: 75px solid #0088CC;
			}
			
			.triangle-down {
				width: 0;
				height: 0;
				border-right: 50px solid transparent;
				border-left: 50px solid transparent;
				border-top: 75px solid #0088CC;
			}
			
			.triangle-left {
				width: 0;
				height: 0;
				border-top: 50px solid transparent;
				border-bottom: 50px solid transparent;
				border-right: 75px solid #0088CC;
			}
		</style>

	</head>

	<body>
		<h2 class="title">三角形-角尖朝上</h2>
		<div class="triangle-up"></div>

		<h2 class="title">三角形-角尖朝右</h2>
		<div class="triangle-right"></div>

		<h2 class="title">三角形-角尖朝下</h2>
		<div class="triangle-down"></div>

		<h2 class="title">三角形-角尖朝左</h2>
		<div class="triangle-left"></div>
	</body>

</html>

夏尔の

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS实现三角形效果

导语：2016年，我说“我会CSS”。那会觉得自己对CSS的浮动，定位以及各种常用的属性算是掌握的比较透彻了，工作时我不用写几行代码就刷新浏览器看效果，而是每写一行代码在脑海中自动浮现出效果图，并准确的知道我接下来该写什么属性，写完属性会带来哪些变化。有一种下笔如有神的感觉！工作两年，新的技术层出不穷，项目里面常写的CSS并没有太大变动，自己的主要精力都集中在JS框架上。所以我想把自己知道的一
复制链接

扫一扫