用CSS怎么寫出一個三角形
慕斯卡5910870
2016-07-27 14:20:53
2 回答
葉0528
TA貢獻15條經驗 獲得超10個贊
效果：
代碼：
<!DOCTYPE>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>三角形</title>
<style>
*{
?margin:0;padding:0;
}
/*向上*/
.triangle_border_up{
? ? width:0;
? ? height:0;
? ? border-width:0 30px 30px;
? ? border-style:solid;
? ? border-color:transparent transparent #333;/*透明 透明 ?灰*/
? ? margin:40px auto;
? ? position:relative;
}
.triangle_border_up span{
? ? display:block;
? ? width:0;
? ? height:0;
? ? border-width:0 28px 28px;
? ? border-style:solid;
? ? border-color:transparent transparent #fc0;/*透明 透明 ?黃*/
? ? position:absolute;
? ? top:1px;
? ? left:-28px;
}
/*向下*/
.triangle_border_down{
? ? width:0;
? ? height:0;
? ? border-width:30px 30px 0;
? ? border-style:solid;
? ? border-color:#333 transparent transparent;/*灰 透明 透明 */
? ? margin:40px auto;
? ? position:relative;
}
.triangle_border_down span{
? ? display:block;
? ? width:0;
? ? height:0;
? ? border-width:28px 28px 0;
? ? border-style:solid;
? ? border-color:#fc0 transparent transparent;/*黃 透明 透明 */
? ? position:absolute;
? ? top:-29px;
? ? left:-28px;
}
/*向左*/
.triangle_border_left{
? ? width:0;
? ? height:0;
? ? border-width:30px 30px 30px 0;
? ? border-style:solid;
? ? border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
? ? margin:40px auto;
? ? position:relative;
}
.triangle_border_left span{
? ? display:block;
? ? width:0;
? ? height:0;
? ? border-width:28px 28px 28px 0;
? ? border-style:solid;
? ? border-color:transparent #fc0 transparent transparent;/*透明 黃 透明 透明 */
? ? position:absolute;
? ? top:-28px;
? ? left:1px;
}
/*向右*/
.triangle_border_right{
? ? width:0;
? ? height:0;
? ? border-width:30px 0 30px 30px;
? ? border-style:solid;
? ? border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
? ? margin:40px auto;
? ? position:relative;
}
.triangle_border_right span{
? ? display:block;
? ? width:0;
? ? height:0;
? ? border-width:28px 0 28px 28px;
? ? border-style:solid;
? ? border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黃*/
? ? position:absolute;
? ? top:-28px;
? ? left:-29px;
}
</style>
</head>
<body>
<!-- 向上的三角形 -->
<div class="triangle_border_up">
? ? <span></span>
</div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
<!-- 向下的三角形 -->
<div class="triangle_border_down">
? ? <span></span>
</div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
<!-- 向左的三角形 -->
<div class="triangle_border_left">
? ? <span></span>
</div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
<!-- 向右的三角形 -->
<div class="triangle_border_right">
? ? <span></span>
</div>
</body>
</html>
添加回答
舉報
0/150
提交
取消