CSS邊框外的小三角形+陰影效果的實現。

本文轉載於:猿2048網站CSS邊框外的小三角形+陰影效果的實現。

...雖然是一個很小的問題,但其實仍是挺實用的。

實現一個邊框外的角。

用純CSS來寫。

一開始實現的效果是這個樣子的。

 可是這個效果沒有辦法給他附帶陰影，因此換了一種寫法。實現成了這個樣子

想要實現這個小三角形，不適用icon ，用純CSS寫，實際上是利用了border的特性來實現的。

..以前都不曉得，後來有人告訴我以後，本身研究了一下才明白的。

雖然網上講的人不少，可是我以爲把本身的收穫記錄下來纔是最棒的。

咱們先來看看border是什麼樣子的吧！

咱們爲一個長寬10px大小的盒子定義了30px的上下左右的邊框

.border{
            width: 10px;
            height:10px;
            
            border-top: 30px solid red;
            border-left: 30px solid blue;
            border-right:  30px solid green;
            border-bottom:  30px solid yellow;

        }

他的邊框的邊與邊的交接是斜的！！

就是利用斜邊，咱們就能夠畫出三角形了！

首先咱們將盒子歸零。

而後把其中三邊變透明，就能夠看到一個三角形出現啦！

    .border{
            width: 0px;
            height:0px;
            
            border-top: 30px solid  transparent;
            border-left: 30px solid blue;
            border-right:  30px solid  transparent;
            border-bottom:  30px solid  transparent;
        }

可是...這並不能解決邊框陰影的問題，由於若是加上陰影，效果就成這個樣子了。

 ，陰影把我剛剛隱藏起來了的邊框又顯現出來啦！

這個時候若是想要實現三角形的邊也有陰影，其實大佬們都已經知道了...再畫一個三角形就行了...

再畫一個border-top ；而後把圖形旋轉135°，再改變box-shadow的位置，就能夠實現剛剛的效果啦。

最後貼一段源碼，你們能夠本身去嘗試嘗試哦！

 

        .Father{
            position: relative;
            width: 200px;
            height: 100px;
            background-color: #fafafa;
            box-shadow: 0 0 5px #444;
            border-radius: 4px;
            
        }
        
        .ThreeC{
                
                position: absolute;

                top: 30px;

                right: -30px;        
        


                width: 0;
                height: 0;

                border-top: 20px solid transparent;

                border-bottom:20px solid #fafafa;
                border-left:  20px solid #fafafa;

                border-right: 20px solid transparent;
                transform: rotate(-135deg);
                
                box-shadow: 0px 0px 5px #444;
        }　　

<div class="Father">
        a
        <div class="ThreeC"></div>
    </div>

嘿嘿，記錄。方便你們看看。