css做三角形的方法

最新推荐文章于 2022-10-12 12:30:43 发布

weixin_30662109

最新推荐文章于 2022-10-12 12:30:43 发布

阅读量83

点赞数

原文链接：http://www.cnblogs.com/xxxo/p/wuliao.html

版权

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