2019-04-11用css绘制不规则矩形，可用于个性导航
2019-04-11 本文已影响0人
Kason晨
我们经常可以看到这种不规则矩形的导航，也蛮好看的。请问是怎么做的？具体有2种思路。
第1种，宽高为0，利用边框来实现。
直接来代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.juXing{
/*background: #000;*/
width: 100px;
/*height: 100px;*/
position: absolute;
right: 0;
border-color: transparent red red transparent;
border-style: solid;
border-width:0 100px 100px 100px;
}
</style>
</head>
<body>
<div class="juXing">
</div>
</body>
</html>
效果：
既然思路已经有了，再设置底边的border-width高一点就可以喽。
然后相关的导航等内容就可以使用绝对定位，
第2种方法，
第三种方法：
直接写一个矩形，然后找一般透明的图片当背景。
哈哈，思路就写到这吧。
