<!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. 自定义Banner

    Spring Boot项目启动时,默认的打印样式如下 自定义 在/src/main/resources目录下新建banner.txt,在里面输入要打印的文字即可,例如: 图形制作网站:http://w ...

  2. Python笔记(二)查找重复元素

    一.查找数列重复元素---count() >>> list = [,,,,,,,,,,,] >>> set = set(list) >>> for ...

  3. Android程序破解思路

    Android程序的一般分析与破解流程 1.如何寻找突破口是分析一个程序的关键.错误提示信息左右一般是程序验证逻辑的核心代码. 2.错误提示是android程序的字符串资源,字符串有可能硬编码到源码中 ...

  4. TensorFlow学习笔记之--[compute_gradients和apply_gradients原理浅析]

    I optimizer.minimize(loss, var_list) 我们都知道,TensorFlow为我们提供了丰富的优化函数,例如GradientDescentOptimizer.这个方法会自 ...

  5. 20165325 预备作业3 Linux安装及学习

    Linux安装及学习 一.VirtualBox和Ubuntu安装 问题一:虚拟机中Ubuntu的版本 在设置虚拟机的操作系统的版本时,我发现我的电脑只能设置32-bit的Ubuntu版本.教程上选用了 ...

  6. 数字图像处理的Matlab实现（1）—绪论

    第1章 绪论 1.1 什么是数字图像处理 一幅图像可以定义为一个二维函数\(f(x,y)\),这里的\(x\)和\(y\)是空间坐标,而在任意坐标\((x,y)\)处的幅度\(f\)被称为这一坐标位置 ...

  7. Vue父子组件和非父子组件传值问题

    父组件跟子组件之间的传值(具体参考lonzhubb商城) 1.父组件传值给子组件形式,ifshop是要传的对象,右边ifshop代表要传的这个对象的数据,如果只是传常量,那么属性可以不用加':'(表示 ...

  8. vue 不常见操作

     对 v-html 的扩展操作, 问题产生背景, 在vue 项目中,用v-html渲染 html字符串,这里面包括a 标签等内容,因为某种需求,a 的默认跳转不符合要求,要经过自己定义的方法跳转. 原 ...

  9. python序列(列表，元组，字典)的常用排序

    列表 正向排序 sort() >>> list=[1,6,3,4,5,2] >>> list.sort() >>> list [1, 2, 3, ...

  10. python 基础 01

    什么是计算机? cpu: 计算机的大脑; 读写速度 3GHZ 内存: (为了提高利用率) 缓冲硬盘和cpu 硬盘: 机械硬盘读写速度70mb/s 计算机里面读写的内容都是01代码 二进制(计算机只认二 ...