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>
  • 相关阅读:
    syslog+rsyslog+logstash+elasticsearch+kibana搭建日志收集
    行为型模式(一)
    spring cloud Sleuth
    Java面试题(基础)
    Java笔试题
    Idea创建SpringBoot项目整合Hibernate
    Java中遍历Map的四种方式
    SQL面试题
    Linux入门
    Spring Boot AOP Demo
  • 原文地址:https://www.cnblogs.com/CyLee/p/5324999.html
Copyright © 2011-2022 走看看