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

css3绘制三角形

2017-07-20 17:03 357 查看

以前做类似消息提示框指示方向的这种需求需要css配合图片才能做，现在只需要直接用css3就可以了。

这是运行效果图

这是完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0; padding: 0;}
.container{
margin: 0 auto;
padding-top: 30px;
width: 1000px;
}
.squares{
position: relative;
margin-top: 30px;
border: 1px solid #ccc;
width: 100px;
height: 100px;
}
.triangle{
display: inline-block;
position: absolute;
}
/* 下 */
.triangleBottom{
bottom: -15px;
left: 35%;
display: inline-block;
border-top: 15px solid #ccc;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}
/* 左 */
.triangleLeft{
top: 35%;
left: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-right: 15px solid #ccc;
border-bottom: 15px solid transparent;
}
/* 上 */
.triangleTop{
top: -15px;
left: 35%;
display: inline-block;
border-right: 15px solid transparent;
border-bottom: 15px solid #ccc;
border-left: 15px solid transparent;
}
/* 右 */
.triangleRight{
top: 35%;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="squares">
<span class="triangle triangleBottom"></span>
<span class="triangle triangleLeft"></span>
<span class="triangle triangleTop"></span>
<span class="triangle triangleRight"></span>
</div>
</div>
</body>
</html>

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

标签： css3 transparent

相关文章推荐

新的分享

章节导航