星空网 > 软件开发 > 网页设计

分分钟搞定 CSS 中令你困扰的各种三角

 

话不多说,直接上图

分分钟搞定 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;
}

分分钟搞定 CSS 中令你困扰的各种三角分分钟搞定 CSS 中令你困扰的各种三角分分钟搞定 CSS 中令你困扰的各种三角

利用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>

  

分分钟搞定 CSS 中令你困扰的各种三角

 

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

<!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">



                                                                                                                                                                                                      

 




原标题:分分钟搞定 CSS 中令你困扰的各种三角

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

国务院发文:完善跨境电商零售进出口管理模式!:https://www.ikjzd.com/articles/111764
怎样合理控制亚马逊留评率?如何做到安全测评?:https://www.ikjzd.com/articles/111765
英国站崩了!SD崩了!决战到天明!今年黑五亚马逊卖家爆单了?:https://www.ikjzd.com/articles/111766
亚马逊选品常见的坑有哪些?如何有效避免?:https://www.ikjzd.com/articles/111767
美国消费者常用的11个玩具购物网站大盘点!:https://www.ikjzd.com/articles/111768
黑五没出单反被搞!盘点20种恶意竞争行为:https://www.ikjzd.com/articles/111769
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流