zoukankan      html  css  js  c++  java
  • CSS模拟小箭头

    图:

    HTML代码:

    <div class="pre-wrap">
        <div class="pre">
            <div class="pre1"></div>
            <div class="pre2"></div>
        </div>
    </div>
    

    CSS代码:

    .pre-wrap {
    	 200px;
    	height: 120px;
    	margin: 50px auto 0;
    	border: 2px solid #F00;
    	border-radius: 4px;
    	position: relative;
    }
    .pre {
    	 80px;
    	height: 80px;
    	position: absolute;
    	top: 20px;
    	left: 40px;
    }
    .pre1 {
    	border- 40px;
    	border-color: transparent #F30 transparent transparent;
    }
    .pre2 {
    	border- 40px;
    	border-color: transparent #FFF transparent transparent;
    	position: relative;
    	top: -80px;
    	left: 15px;
    }
    .pre1, .pre2 {
    	/*****设置border-style:dashed;使ie6支持border透明*****/
    	border-style: dashed solid dashed dashed;
        /*****设置容器宽高为0*****/
    	 0;
    	height: 0;
    	/*****去掉ie6下默认高度,设置以下属性*****/
    	line-height: 0;
    	font-size: 0;
    	overflow: hidden;
    
    }
    
  • 相关阅读:
    关于java的scanner类
    switch_case注意事项
    MySQL数据库语句总结
    注册验证
    简单的java水果商店后台
    easyui判断下拉列表
    springmvc的前端控制器
    springmvc注解驱动
    双色球
    初来乍到
  • 原文地址:https://www.cnblogs.com/yangjunhua/p/2327550.html
Copyright © 2011-2022 走看看