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>

嘿嘿，记录。方便你们看看。