使用css做表徵圖

標籤：原理   style   基於   text   表徵圖   top   ant   add   black   

首先原理是：

請一步一步粘貼代碼，慢慢品味。其實，很簡單。。。

1.首先三角形的前身是一個普通的矩形-正方形||長方形？ok！

<div class=‘box‘></div>.box{        border:80px solid red;    }

沒錯，使用邊框屬性，我們得到了一個長方形。

然後，我們弄些三角出來。

 .box{            width:0;            border:80px solid transparent;            border-left:100px solid black;        }<div class=‘box‘></div>

你i想要哪個方向的三角，就在border上取哪個方向的就可以了。

原理：

• 每一個對角是一個三角形。
• 盒模型預設寬是100%;所以要歸0；
• boredr為透明，方便我們只給所需要方向的三角著色。

基於這個原理，在做一些複雜的時候，我們可以配合偽類元素產生。下面是一些好玩又簡單的程式碼範例。

 

1.1旗幟：

.flag {    width: 0;    height: 0;    border: 20px solid #FF6600;    border-top-width: 40px;    border-bottom-color: transparent;    border-bottom-width: 20px;}<div class=‘flag‘></div>

　　

1.2複雜的絲帶~

（雖然醜……但是技術才是重點！！！！）

<!--第一，繪製一個長方形-主體-->.ribbon {    margin:auto;    position: relative;    width: 10rem;    height: 3rem;    padding: 0.7rem 0;    font-size: 1.6rem !important;    color: #fff;    text-align: center;    background: red;    box-shadow:1px 1px 0 rgba(255, 233, 200, 0.5);}

<!--2.兩側的小翅膀-->.ribbon:before,.ribbon:after {    content: "";    position: absolute;    display: block;    bottom: -0.6rem;    border: 1.5rem solid gold;    z-index: -1;}.ribbon:before {    left: -2.4rem;    border-right-width: 1.5rem;    border-left-color: transparent;    box-shadow: 1px 1px 0 rgba(176, 102, 166, 0.8);}.ribbon:after {    right: -2.4rem;    border-left-width: 1.5rem;    border-right-color: transparent;    box-shadow: 0 1px 0 rgba(176, 102, 166, 0.8);}

<!--3.還有兩個內側的小陰影！-->.ribbon .ribbon-content:before,.ribbon .ribbon-content:after {    content: "";    position: absolute;    display: block;    border-style: solid;    border-color: #bf004c transparent transparent transparent;    bottom: -0.6rem;}.ribbon .ribbon-content:before {    left: 1px;    border-width: 0.6rem 0 0 0.6rem;}.ribbon .ribbon-content:after {    right: 0;    border-width: 0.6rem 0.6rem 0 0;}<div class="ribbon">        <span class="ribbon-content">金卡會員</span></div>

 

使用css做表徵圖