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

CSS通过边框border-style来写小三角

2016-01-29 22:37 495 查看 
<!DOCTYPE html>

/*直接复制代码即可在浏览器验证*/

<html>

<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
/*盒子的样式*/
.box {
position: relative;
margin: 20px auto;
height: 200px;
width: 200px;
background: rgba(0, 0, 0, 0.5);
}
/*利用border-style实现*/
.drop-down {
position: absolute;
top: 10px;
left: 10px;
height: 0;
width: 0;
border: 3px;
/*style依次是上边框、右、下、左*/
border-style: solid dashed dashed dashed;
/*想实现向下的三角就把上边框设置为实现其余几个边框都是虚线并且颜色设置为透明*/
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
color: #fff;
}

/*再来写个三角向右的例子*/
.right {
position: absolute;
top: 10px;
left: 30px;
height: 0;
width: 0;
border:10px;
border-style:dashed dashed dashed solid;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
color: yellowgreen;
}

</style>
</head>
<body>
<!--先写个盒子加上黑色背景，来和生成的小三角来做下对比-->
<div class="box">
<i class="drop-down"></i>
<i class="right"></i>
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航