您的位置：首页 > Web前端 > CSS

用CSS border相关属性画三角形

2014-08-16 09:19 246 查看

效果

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;

}

github链接：https://github.com/kiwiwin/css-demo中triangle-demo

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html

相关文章推荐

新的分享

章节导航