border 写的小三角

最新推荐文章于 2021-08-04 01:01:25 发布

fedawn

最新推荐文章于 2021-08-04 01:01:25 发布

阅读量2.8k

点赞数

分类专栏：代码 css 文章标签： border class

本文链接：https://blog.csdn.net/fedawn/article/details/7565951

版权

代码同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		＊{ margin:0; padding:0;}
		body{ background:#ccc;}
		.less{ border-style:solid dashed dashed dashed; border-color:red transparent transparent transparent; border-width:10px 10px 0 10px;}
		.more{ border-style:dashed dashed solid dashed; border-color: transparent transparent red transparent; border-width:0 10px 10px 10px;}/* dashed 边框透明 */

		 a{ display:inline-block; position:relative; height:0; overflow:hidden; vertical-align:middle;}/* height:0;解决i.e.下显示高度问题 */

		.block{ width:200px; height:60px; line-height:60px; text-align:center; background:green; overflow:hidden; vertical-align:middle;}
	</style>
</head>
<body>
	<div class="block">
		<a href="" class="less"></a>
	</div>
	<br />

	<div class="block">
		<a href="" class="more"></a>
	</div>

</body>
</html>

fedawn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
border 写的小三角

＊{ margin:0; padding:0;} body{ background:#ccc;} .less{ border-style:solid dashed dashed dashed; border-color:red transparent transparent transparent; border-width:10px 10px 0 10px;} .more{ bord
复制链接

扫一扫