div的三角指向和分割线写法

div添加三角指向

<style>

.arrow-right{

    margin: 500px auto;

    width:300px;

    height:80px;

    background-color: pink;

    padding-left: 20px;

}

.arrow-right:before{

    background-color: pink;

    content: "";

    display: block;

    width: 0;

    height: 0;

    border-top: 10px solid #fff;

    border-bottom: 10px solid #fff;

    border-left: 20px solid pink;

    position: relative;

    top: 30px;

    left: 300px;

}

</style>

<p class="arrow-right">一起做博客吧？</p>

分割线用法

<style>

* {

    padding: 0;

    margin: 0;

}

.spliter {

    width: 600px;

    margin: 50px auto;

    font-size: 20px;

    font-weight: 700;

    color: #808080;

}

.spliter::before, .spliter::after {

    content: '';

    display: inline-block;

    border-top: 1px solid black;

    width: 200px;

    margin: 5px;

}

</style>

<p class="spliter">分割线</p>