码迷,mamicode.com
首页 > Web开发 > 详细

纯css3绘制三角形

时间:2017-10-31 14:22:11      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:<script>

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css3绘制三角形</title>

<style type="text/css">

div{

margin-bottom: 10px;

}

#SJX_UP{

width: 0px;

height: 0px;

overflow: hidden;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

/*兼容IE6*/

_border-left: 20px solid #fff;

_border-right: 20px solid #fff;

border-bottom: 20px solid red;

}

#SJX_DOWN{

width: 0px;

height: 0px;

overflow: hidden;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

border-top: 20px solid red;

}

#SJX_RIGHT{

width: 0px;

height: 0px;

overflow: hidden;

border-top: 20px solid transparent;

border-bottom: 20px solid transparent;

border-left: 20px solid red;

}

#SJX_LEFT{

width: 0px;

height: 0px;

overflow: hidden;

border-top: 20px solid transparent;

border-bottom: 20px solid transparent;

border-right: 20px solid red;

}

</style>

</head>

<body>

<div id="SJX_UP"></div>

<div id="SJX_DOWN"></div>

<div id="SJX_LEFT"></div>

<div id="SJX_RIGHT"></div>

</body>

</html>

20px哪里可以自行调节大小

本文出自 “12897581” 博客,请务必保留此出处http://12907581.blog.51cto.com/12897581/1977699

纯css3绘制三角形

标签:<script>

原文地址:http://12907581.blog.51cto.com/12897581/1977699

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!