这段时间想用css写出如下的三角形
经查阅可以使用div的border实现,将div的高度和宽度设置为0然后设置该div的border的大小,和颜色即可显示出如图的样式
1、新建一个元素,如果行内元素就display:block它。
<div class="triangle"></div>
2、把它的宽高设置为height:0px; width:0px;
3、设置边框border属性,用来实现三角形。
可以用如下的的css代码
.triangle{
display:inline;
height:0px;
width:0px;
border:100px solid #000;
border-color:transparent transparent transparent #00A5A5;
border-style:solid solid solid dashed;
line-height:0px;
}
附源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{ margin:0px; padding:0px;}
.triangle{
display:inline;
height:0px;
width:0px;
border:100px solid #000;
border-color:transparent transparent transparent #00A5A5;
border-style:solid solid solid dashed;
line-height:0px;
float:left;
}
.fang{
display:inline;
height:0px;
width:0px;
border:100px solid #000;
border-color:#00A5A5 #00A5A5 #00A5A5 #00A5A5;
border-style:solid solid solid solid;
line-height:0px;
float:left;
}
</style>
</head>
<body>
<div>
<div class="fang">demodemo</div>
<div class="triangle"></div>
</div>
</body>
</html>