zoukankan      html  css  js  c++  java
  • css 实现三角形

    三角形可用CSS的border实现。

    0;
    height:0;
    border-right:10px solid red;
    border-top:10px solid transparent;//设置透明
    border-bottom:10px solid transparent;

    三角形 顶点在哪边 就 不设置哪边的border值 ,三角形向左或向右,则设置border的顶部和底部为相同像素的透明色。三角形的高则为像素的点素,即px值。

    另外CSS选择器中,after和before表示在前后插入内容。

    eg:请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:
    <div id=”demo”></div>

    #demo{
        100px;
        height:100px;
        border: 2px solid #000;
       position:relative;
    }
    #demo:after,#demo:before{
      0px;
      height:0px;
      position:absolute;
      left:100%: 
    }
    #demo:after{
      border-top:10px solid transparent;
      border-bottom:10px solid transparent;
      border-left:10px solid #fff;
      top:20px;
    }
     
    #demo:before{
      border-top:12px solid transparent;
      border-bottom: 12px solid transparent;
      border-left:12px solid #000;
      top:18px;
    }
  • 相关阅读:
    springboot 配置
    spring boot配置分页插件
    mongodb 操作
    java基础知识
    java设计模式
    /cat/cpuinfo信息查看
    app接口开发
    基于OpenAM系列的SSO----基础
    关于Linux下的连接文件学习总结
    YII :将oracle中timestamp 字段正常显示在页面中
  • 原文地址:https://www.cnblogs.com/cyanqq/p/5135174.html
Copyright © 2011-2022 走看看