当前位置 : 主页 > 网页制作 > css >

css 三角、箭头

来源:互联网 收集:自由互联 发布时间:2021-06-13
div id ="testDiv" / div #testDiv { margin : 1.5rem 5rem 1rem 5rem ; background-color : #ebf1fe ; border : 1px solid #cdcdcd ; padding : 1rem 1.5rem 2rem ; position : relative ; } #testDiv:before { box-sizing : content-box ; width : 0px ; he
<div id="testDiv"></div>
    #testDiv{
        margin: 1.5rem 5rem 1rem 5rem;
        background-color: #ebf1fe;
        border: 1px solid #cdcdcd;
        padding: 1rem 1.5rem 2rem;
        position: relative;
    }
    #testDiv:before{
        box-sizing: content-box;
        width: 0px;
        height: 0px;
        position: absolute;
        top: -40px;;
        right:calc(50% - 19px);
        padding:0;
        border-bottom:20px solid #ebf1fe;
        border-top:20px solid transparent;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        display: block;
        content:‘‘;
        z-index: 12;
    }
    #testDiv:after{
        box-sizing: content-box;
        width: 0px;
        height: 0px;
        position: absolute;
        top: -42px;;
        right:calc(50% - 20px);;
        padding:0;
        border-bottom:21px solid #CCCCCC;
        border-top:21px solid transparent;
        border-left:21px solid transparent;
        border-right:21px solid transparent;
        display: block;
        content:‘‘;
        z-index:10
    }

网友评论