用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%);可以实现波浪效果;


posted on 2015-09-13 20:29  低调活,高调唱  阅读(255)  评论(0编辑  收藏  举报