使用纯css画三角形

<!DOCTYPE html>
　　<html lang="en">
　　　　<head>
　　　　　　<meta charset="UTF-8">
　　　　　　<title>各种三角形</title>
　　　　</head>
　　　　<style type="text/css">
　　　　　.triangle_border_up{

　　　　　　width:0;

　　　　　　height:0;

　　　　　　border-style:solid;　　

　　　　　　border-width:0 30px 30px;
　　　　　　border-color:transparent transparent #333;/*透明 透明 灰*/
　　　　　　margin:40px auto;
　　　　　　position:relative;
　　　　}

　　　　　　　　/*向下*/
　　　　　.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_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_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;
　　　　}

　　　</style>
　　　　<body>
　　　　　　<!-- 向上的三角形 -->
　　　　　　<div class="triangle_border_up">
　　　　　　</div>

　　　　　　<!-- 向下的三角形 -->
　　　　　　<div class="triangle_border_down">
　　　　　　</div>

　　　　　　<!-- 向左的三角形 -->
　　　　　　<div class="triangle_border_left">
　　　　　　</div>

　　　　　　<!-- 向右的三角形 -->
　　　　　　<div class="triangle_border_right">
　　　　　　</div>


　　　　</body>
</html>

posted on 2018-10-24 16:19  马晓荣  阅读(88)  评论(0)    收藏  举报

导航