用css 实现三角形

__Begin

于 2019-08-21 09:47:00 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

分类专栏： Css

本文链接：https://blog.youkuaiyun.com/weixin_42748455/article/details/99938218

Css 专栏收录该内容

5 篇文章

订阅专栏

主要用到了 border 的 transparent 属性 , 如有不懂可以参考 https://www.cnblogs.com/youhong/p/6530575.html 写的很详细

代码如下:

<!DOCTYPE html>
<html>
<head>
	<title>三角形</title>
</head>
<body>
	<center>
		<div class="demo"></div>
	</center>
	<style type="text/css">
		.demo{
			width:100px;
			height: 100px;
			background:#333;
			position: relative;
		}
		.demo:hover{
			background:red;
		}
		.demo:hover.demo:after{
			content:"";
			position: absolute;
			top:100%;
			left: 45px;
			height: 0;
			width: 0;
			border:solid transparent;
			border-width:10px;
			border-top-color:red;
		}
	</style>
</body>
</html>