CSS如何实现小箭头及模拟微信对话框样式

最新推荐文章于 2024-06-28 09:43:34 发布

大2010鹏

最新推荐文章于 2024-06-28 09:43:34 发布

阅读量1.8k

点赞数 1

分类专栏： HTML/CSS/JAVASCRIPT

本文链接：https://blog.csdn.net/weixin_42143410/article/details/97533299

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS箭头</title>
    <style>
        .step1 {
            width: 30px;
            height:30px;
            margin-bottom: 20px;
            border-width:20px;
            border-style:solid;
            border-color:#e66161 #f3bb5b #94e24f #85bfda;
        }
        .step2 {
            width: 0px;
            height:0px;
            margin-bottom: 20px;
            border-width:20px;
            border-style:solid;
            border-color:#e66161 #f3bb5b #94e24f #85bfda;
        }
        .step3{
            width: 0px;
            height:0px;
            margin-bottom: 20px;
            border-width:20px;
            border-style:solid;

            border-color: transparent;
            border-top-color: #e66161;
        }

        .test-step{
            position: relative;
            margin-left:20px;
            mar