The implementation of the small triangle + shadow effect outside the CSS border ., Css border

The implementation of the small triangle + shadow effect outside the CSS border ., Css border

... Although it is a small problem, it is actually quite practical.

Implement an angle outside the border.

It is written in pure CSS.

The first implementation is like this.

However, there is no way to attach a shadow to this effect, so I used another method. This is achieved

To implement this small triangle, it is not applicable to icons. It is written in pure CSS, but it is actually implemented using the border feature.

I didn't know it before. Someone told me later that I learned it after studying it.

Although many people talk about it online, I think it is best to record my gains.

Let's take a look at what border looks like!

We define a 30 PX upper/lower left border for a box with a length of 10 PX.

.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;        }    

The intersection of the sides of his border is oblique !!

We can draw a triangle using the oblique edge!

First, we will return the box to zero.

Then, make the three sides transparent and you will see a triangle!

    .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;        }    

However, this does not solve the border shadow problem, because if you add a shadow, the effect will be like this.

The Shadow shows the hidden border again!

At this time, if you want to implement the side of the triangle, there will also be shadows. In fact, the big guys already know. Just draw another triangle...

Draw a border-top image, rotate the image by 135 °, and change the position of box-shadow to achieve the effect just now.

Finally, post a piece of source code. You can try it on your own!

 

        .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>

Hey, record. For your convenience.