<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>CSS中border画三角形</title>
    <style>
    /*  
    等腰三角形
        .sanjiaoxing{
            width:0;
            height:0;
            border-bottom:100px solid yellow;
            border-left:50px solid transparent;
            border-right:50px solid transparent;
            
        }
    倒等腰三角形
        .sanjiaoxing{
            width:0;
            height:0;
            border-top:100px solid yellow;
            border-left:50px solid transparent;
            border-right:50px solid transparent;
        
        }
    右为底等腰三角形
        .sanjiaoxing{
            width:0;
            height:0;
            border-right:100px solid yellow;
            border-bottom:50px solid transparent;
            border-top:50px solid transparent;
        }
     左为底等腰三角形
        .sanjiaoxing{
            width:0;
            height:0;
            border-left:100px solid yellow;
            border-top:50px solid transparent;
            border-bottom:50px solid transparent;
        }
    左下为底等腰三角形
        .sanjiaoxing{
                    width:0;
                    height:0;
                    border-left:100px solid yellow;
                    border-top:100px solid transparent;
                }
        .sanjiaoxing{
                    width:0;
                    height:0;
                    border-right:100px solid transparent;
                    border-bottom:100px solid yellow;
                        }
    右下为底等腰三角形
        .sanjiaoxing{
                            width:0;
                            height:0;
                            border-right:100px solid yellow;
                            border-top:100px solid transparent;
                        }
        .sanjiaoxing{
                            width:0;
                            height:0;
                            border-bottom:100px solid yellow;
                            border-left:100px solid transparent;
                        }
        */
            
    </style>
 </head>
 <body>
  <div>
    <div class='sanjiaoxing'>
    </div>
  </div>
 </body>
</html>

css中border画三角形的更多相关文章

  1. 用CSS的border画三角形

    用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...

  2. html border画三角形

    最近遇到了问题就是画推进条类似于

  3. CSS之border绘制三角形

    用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px a ...

  4. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  5. CSS用border绘制三角形

    使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子 ...

  6. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

  7. CSS深入了解border：利用border画三角形等图形

    三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html la ...

  8. css 利用border 绘制三角形. triangle

    1.基础三角形. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. 利用Border画三角形

    边框 1.边框其实并不是矩形,而是梯形 2.利用边框画三角形: div.a{ width:0px; height:0px; border:10px white solid; border-top-co ...

随机推荐

  1. python问题：AttributeError: 'module' object has no attribute 'SSL_ST_INIT'

    AttributeError: 'module' object has no attribute 'SSL_ST_INIT' 问题背景: 下载工具wydomain,安装依赖包以后,出现下图问题. 几经 ...

  2. Setup Objective UI with UMG

    创建UI蓝图控件 拖入一个文本框 新建一个Actor,继承自FPSHUD 创建控件,并显示到界面上 新建一个Actor,继承FPSGameMode 将属性里的HUD更改为之前创建的 在世界设置中,将G ...

  3. vue 中通过 ajax 获取数据时，如何避免绑定的数据中出现 property of undefined 错误

    参考链接:https://segmentfault.com/q/1010000008264089?_ea=1597485

  4. RabbitMQ应用场景

    1.背景 RabbitMQ是一个由erlang开发的AMQP(Advanved Message Queue)的开源实现. 2.应用场景 2.1异步处理 场景说明:用户注册后,需要发注册邮件和注册短信, ...

  5. 匿名内部类可以访问的变量---静态成员变量和final修饰的局部变量

    在学习多线程的时候用到了匿名内部类,匿名内部类可以访问static静态成员变量或者final修饰的局部变量. 匿名内部类在编译之后会生成class文件,比如Test内的第一个匿名内部类编译之后就是Te ...

  6. Keepalived+LVS-DR+Nginx高可用故障切换模式

    LVS架构中,不管是NAT模式还是DR模式,当后端的RS宕掉后,调度器依然会把请求转发到宕掉的RS上,这样的结果并不是我们想要的.其实,keepalived就可以解决问题,它不仅仅有高可用的功能,还有 ...

  7. 【leetcode】893. Groups of Special-Equivalent Strings

    Algorithm [leetcode]893. Groups of Special-Equivalent Strings https://leetcode.com/problems/groups-o ...

  8. linux syscall 详解【转】

    转自:https://blog.csdn.net/feixin620/article/details/78416560 引言:分析Android源码的过程中,要想从上至下完全明白一行代码,往往涉及ap ...

  9. linux系统的三种网络连接模式

    VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式).要想在网络管理和维护中合理应用它们,你就应该先了解一下这三种工作模式. 1 ...

  10. Server-side activities have been updated. You need to restart SharePoint Designer to use the updated version of activities

    一,环境: SharePoint Online Win10 + SharePoint Designer 2013 错误描述: 使用SPD3013打开SPO站点,然后编辑已有工作流(2013),报错: ...