pwindy  
在完成任务的同时，还需要不断“复盘”，不论你多么的忙，都需要留下时间思考，可以思考哪些地方做的好，哪些地方我们可以改进，应该如何改进，注重总结才是王道
css中使用伪类制作箭头

如下所示的代码

<body>
    <div class="c-main"></div>  
</body>

 

css中给c-main添加宽度和高度方便观察箭头

.c-main{
    position: relative; //必须要写!
    width: 400px;
    height: 400px;
    border: 1px solid #000;
}

/使用伪类制作箭头/

.c-main:before{
    content: "";
    border-top: 9px solid transparent;/方框上部分背景颜色为透明/
    border-bottom: 9px solid transparent;/方框下部分背景为透明/
    border-right: 9px solid #000;/箭头背景颜色/
    position: absolute;/绝对定位1/
    top: 25px;/距离顶部位置偏移量2/
    left: -9px;/距离左边位置偏移量3/ /123都是控制显示位置的/
}
.c-main:after{
    content: "";
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #fff;/箭头背景颜色，覆盖前面的#eee颜色，使其颜色与整体颜色一致/
    position: absolute;
    top: 27px;
    left: -7px;//这里的top:27px，left:-7px是为了遮盖住.c-main:before生成的箭头，使箭头边框呈现颜色
}

效果如下：

 

 

 

参考---https://www.cnblogs.com/Ananiah/p/12017477.html

 

posted on 2021-11-24 14:51  pwindy  阅读(588)  评论(0)    收藏  举报
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3