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

2021-01-30 21:09:40


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>

34.png

分割线用法

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

35.png


  本站内文章部分来自于用户投稿或者编辑整理,文章其版权均归原作者及其网站所有。

上一篇:html中拨打电话、发送短信、发送邮件、跳转···

下一篇:判断网站当前是pc还是wap