伪类的用法

1、阴影

<div class="before">
        <h1>Before</h1>
        <p>Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果，但重绘消耗较多</p>
    </div>
    <br>
    <div class="after">
        <h1>After</h1>
        <p>通过修改伪元素的透明度来实现同样的效果,没有重绘消耗</p>
    </div>

before

.before {
    padding: 1em;
    background-color: #fff;
    transition: 0.2s;
}
.before:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

after

.after {
    position: relative;
    padding: 1em;
    background-color: #fff;
}
.after:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: 0.2s;
}
.after:hover:before {
    opacity: 1;
}

2、三角形

<div class='container'>
    <img alt='' src='http://placehold.it/400x200'>
</div>

.container {
    margin: 40px auto;
    width: 400px;
    border: 1px solid #eee;
    overflow: hidden;
    position: relative;
}
.container:before {
    z-index: 9999;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid rgb(158, 109, 109);
    position: absolute;
    right: 0;
    top: 80px;
}

3、图片箭头

transform-origin

设置旋转元素的基点位置
bottom right = right bottom = 100% 100%
bottom left = left bottom = 0 100%

参考地址：caibaojian.com/transform-o…

backface-visibility: visible|hidden;

当元素旋转不面向屏幕时是否可见
visible：背面是可见的
hidden：背面是不可见的

参考地址：www.htmleaf.com/ziliaoku/qi… background-color: inherit;

inherit 关键字指定一个属性应从父元素继承它的值。

<div class="healthy-snacks">
    <div class="featured-image">
        <img src="http://placehold.it/400x200" alt="Healthy Snacks" />
        <div class="arrow"></div>
    </div>
    <article>
        <header>
            <h3><span>Healthy</span> <span>Snacks</span></h3>
        </header>
        <div class="excerpt">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere perferendis perspiciatis temporibus
                debitis distinctio blanditiis ea. Animi, placeat sint magni.</p>
            <a href="#"><span class="fa fa-arrow-circle-right"></span><span>Show me some recipes</span></a>
        </div>
    </article>
</div>

html {
    min-height: 100%;
}
body {
    background: #E1E1E1;
    /* background-size: cover;
    background-position: 50% 50%; */
}
.healthy-snacks {
    margin: 2em auto;
    width: 90%;
    max-width: 680px;
    background: #fff;
    border-radius: 3px;
    backface-visibility: hidden;
}
.healthy-snacks .featured-image {
    position: relative;
    overflow: hidden;
}
.healthy-snacks .featured-image img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.healthy-snacks .featured-image .arrow {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0px;
    background-color: #fff;
}
.healthy-snacks .featured-image .arrow:before,
.healthy-snacks .featured-image .arrow:after {
    content: '';
    position: absolute;
    bottom: 100%;
    width: 80%;
    height: 20px;
    background-color: inherit;
}
.healthy-snacks .featured-image .arrow:before {
    right: 80%;
    transform-origin: 100% 100%;
    transform: skewX(45deg);
}
.healthy-snacks .featured-image .arrow:after {
    left: 20%;
    transform-origin: 0 100%;
    transform: skewX(-45deg);
}
.healthy-snacks article {
    padding: 1em 1em 2em;
    display: flex;
}

.healthy-snacks article:after {
    content: "";
    display: table;
    clear: both;
}

.healthy-snacks article header {
    border-bottom: 2px solid #9bb068;
}

.healthy-snacks article header h3 {
    margin: 0 0 0.25em;
    font-family: 'McLaren', cursive;
    font-size: 1.5em;
    color: #767d2e;
    text-align: center;
    text-transform: uppercase;
}

.healthy-snacks article .excerpt {
    font-family: 'Open Sans', sans-serif;
}

.healthy-snacks article .excerpt p {
    line-height: 24px;
}

.healthy-snacks article .excerpt a {
    display: block;
    margin-top: 1em;
    color: #c00413;
    text-decoration: none;
}

.healthy-snacks article .excerpt a:hover {
    color: #fb2f40;
}

.healthy-snacks article .excerpt a span:first-child {
    padding-right: 1em;
    vertical-align: middle;
}

@media only screen and (min-width: 680px) {
    .healthy-snacks article header {
        width: 40%;
        float: left;
        border-bottom: none;
        border-right: 2px solid #9bb068;
    }

    .healthy-snacks article header h3 {
        margin: 1em 0;
        font-size: 2em;
    }

    .healthy-snacks article header h3 span {
        display: block;
    }

    .healthy-snacks article .excerpt {
        width: 60%;
        float: left;
        padding-left: 2em;
    }
}

参考地址：github.com/HongqingCao…