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

css做三角形的方法

时间:2015-09-13 21:27:30      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:

用csss做三角形使用border属性

一.

<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.div1{
border: 200px solid red;
border-color: transparent transparent black transparent;
width: 0;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>

或者是

<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.div1{
             border-top: 10px solid gray;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
width: 0;

}
</style>
</head>
<body>
<div class="div1"></div>
</body>


二.用border-radius做椭圆.圆角效果.圆
  或者用几个div也可以做圆角效果用css2.0做很麻烦这里也只是提一下
三.用background-image:radial-gradient(circle at 50% 0%,#fff,71%,transparent 71%);可以实现波浪效果;


css做三角形的方法

标签:

原文地址:http://www.cnblogs.com/xxxo/p/wuliao.html

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