你的位置:首页 > 网页设计

[网页设计]分分钟搞定 CSS 中令你困扰的各种三角


 

话不多说,直接上图

.triangle-one {
display: inline-block;
border-top: 50px red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-six {
display: inline-block;
border: 50px transparent solid;
border-bottom: 50px yellow solid;
}
.triangle-eight {
display: inline-block;
border: 50px transparent solid;
border-left: 30px yellow solid;
border-bottom: 0;
}

利用border覆盖属性:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .triangle-one {      display: inline-block;      border-top: 50px red solid;      border-right: 50px green solid;      border-bottom: 50px yellow solid;      border-left: 50px blue solid;    }    .triangle-two {      display: inline-block;      border-top: 0 red solid;      border-right: 50px green solid;      border-bottom: 50px yellow solid;      border-left: 50px blue solid;    }    .triangle-stree {      display: inline-block;      border-top: 50px red solid;      border-right: 0 green solid;      border-bottom: 50px yellow solid;      border-left: 50px blue solid;    }    .triangle-four {      display: inline-block;      border-top: 50px red solid;      border-right: 0 green solid;      border-bottom: 0 yellow solid;      border-left: 50px blue solid;    }    .triangle-five {      display: inline-block;      border: 50px transparent solid;      border-top: 50px red solid;    }    .triangle-six {      display: inline-block;      border: 50px transparent solid;      border-bottom: 50px yellow solid;    }    .triangle-seven {      display: inline-block;      border: 50px transparent solid;      border-top: 60px red solid;      border-right: 0;    }    .triangle-eight {      display: inline-block;      border: 50px transparent solid;      border-left: 30px yellow solid;      border-bottom: 0;    }  </style></head><body>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div></body></html>

  

 

 类似这样的尖角都是这样做:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .back {      width: 1000px;      height: 1000px;      margin: 0 auto;      background-color: #ddd;      position: relative;    }    .back-in {      position: absolute;      width: 1020px;      height: 45px;      left: -20px;      top: 50px;      background-color: #2F4F4F;    }    .back-img {      border: 20px solid transparent;      border-top: 10px solid dimgrey;      border-right: 0;      display: inline-block;      position: absolute;      top: 95px;      left: -20px;    }    .back-font {      line-height: 9px;      margin-left: 30px;      color: white;    }  </style></head><body>  <div >    <div ><h3 >妹子求关注 ^.^</h3></div>    <div ></div>  </div></body></html>

                                                                                                                                                                                                                                                                                                                                                                                                                                                          小图片可以去http://www.bootcss.com/p/font-awesome/ 下载第三方模块,

对应的是unicode编码图片

Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

导入方式:

<link href="../font-awesome/css/font-awesome.css" type="text/css" rel="stylesheet">