zoukankan      html  css  js  c++  java
  • Html

    对话箭头

    <!DOCTYPE HTML>
    
    <html lang="en-US">
    
        <head>
    
            <meta charset="UTF-8">
    
            <title>箭头</title>
    
            <style type="text/css">
                .pr {
                    position: relative;
                }
                
                .reply-content {
                    background-color: #fcfcfc;
                    border: 1px solid #fcfcfc;
                    border-radius: 4px;
                    box-shadow: 0 0 5px #ccc;
                    padding: 0.6em;
                     50%;
                    margin: 0px auto;
                }
                
                .arrow {
                    border-color: transparent #fff transparent transparent;
                    border-style: dashed solid dashed dashed;
                    border- 6px;
                    display: block;
                    font-size: 0;
                    height: 0;
                    left: -12px;
                    line-height: 0;
                    position: absolute;
                    top: 8px;
                     0;
                    z-index: 999;
                }
                /*箭头向上*/
                
                .arrow-up {
                     0;
                    height: 0;
                    border-left: 30px solid transparent;
                    border-right: 30px solid transparent;
                    border-bottom: 30px solid #f00;
                }
                /*箭头向右*/
                
                .arrow-right {
                     0;
                    height: 0;
                    border-top: 20px solid transparent;
                    border-bottom: 20px solid transparent;
                    border-left: 20px solid green;
                }
                /*箭头向下*/
                
                .arrow-down {
                     0;
                    height: 0;
                    border-left: 40px solid transparent;
                    border-right: 40px solid transparent;
                    border-top: 40px solid #ccc;
                }
                /*箭头向左*/
                
                .arrow-left {
                     0;
                    height: 0;
                    border-top: 30px solid transparent;
                    border-bottom: 30px solid transparent;
                    border-right: 30px solid #00f;
                }
            </style>
    
        </head>
    
        <body>
    
            <div class="reply-content pr">
    
                <span class="arrow"></span> 喵了个咪日了狗了
    
            </div>
    
        </body>
  • 相关阅读:
    MySQL学习笔记(六):索引
    正则表达式基础知识,持续更新…
    js改变盒子大小(上下左右)分析
    表单自定义样式
    js拖拽分析
    javascript右键菜单分析
    简要分析javascript的选项卡和轮播图
    表单联动的总结
    浅显总结ASCII Unicode UTF-8的区别
    瀑布流知识的延伸
  • 原文地址:https://www.cnblogs.com/CyLee/p/5324999.html
Copyright © 2011-2022 走看看