用CSS border相关属性画三角形

最新推荐文章于 2022-09-19 19:08:19 发布

kiwi小白

最新推荐文章于 2022-09-19 19:08:19 发布

阅读量1.9k

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/kiwi_coder/article/details/38497767

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果

HTML：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Triangle Demo</title>
<link rel="stylesheet" href="triangle.css">
</head>

<body>
<h3>Down Triangle</h3>
<div class="down-triangle">
</div>

<h3>Up Triangle</h3>
<div class="up-triangle">
</div>

<h3>Left Triangle</h3>
<div class="left-triangle">
</div>

<h3>Right Triangle</h3>
<div class="right-triangle">
</div>
</body>
</html>

CSS：（triangle.css）

.down-triangle {
width: 0;
height: 0;
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: #dc291e transparent;
}

.up-triangle {
width: 0;
height: 0;
border-width: 0px 10px 10px 10px;
border-style: solid;
border-color: #dc291e transparent;
}

.left-triangle {
width: 0;
height: 0;
border-width: 10px 10px 10px 0px;
border-style: solid;
border-color: transparent #dc291e;
}

.right-triangle {
width: 0;
height: 0;
border-width: 10px 0px 10px 10px;
border-style: solid;
border-color: transparent #dc291e;
}