<!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. __call__

    object.__call__(self[, args...]) Called when the instance is “called” as a function; if this method ...

  2. maven的pom.xml文件的标签详解

    该博文引至:https://www.cnblogs.com/hafiz/p/5360195.html <project xmlns="http://maven.apache.org/P ...

  3. DedeCMS找后台目录漏洞

    参考文章 https://xianzhi.aliyun.com/forum/topic/2064 近期,学习的先知社区<解决DEDECMS历史难题--找后台目录>的内容,记录一下. 利用限 ...

  4. vue 学习笔记—路由篇

    一.关于三种路由 动态路由 就是path:good/:ops    这种 用 $route.params接收 <router-link>是用来跳转  <router-view> ...

  5. Spring boot中普通工具类不能使用@Value注入yml文件中的自定义参数的问题

    在写一个工具类的时候,因为要用到yml中的自定义参数,使用@Value发现值不能正常注入,都显示为null: yml文件中的自定义格式 调用工具类的时候不能new的方式 要使用@Autowired的方 ...

  6. 20165237 2017-2018-2 《Java程序设计》第7周学习总结

    20165237 2017-2018-2 <Java程序设计>第7周学习总结 教材学习内容总结 1.MySQL数据库管理系统,简称MySQL,是世界上最流行的开源数据库管理系统. 2.启动 ...

  7. [转载]tmux常用快捷键

    Hello World 窗口管理只是 tmux 功能的一小部分,另一个很有用的功能就是,连接到远程主机之后,一旦断开,那么当前账户登录的任务就被取消了,但是使用 tmux 可以在断开之后继续工作,下次 ...

  8. C++虚函数总结

    为什么使用虚函数?什么是虚函数?虚函数是为了解决什么问题? 面向对象的三大特征: 封装 多态 继承 普通虚函数 虚析构函数 纯虚函数 抽象类 接口类 隐藏 vs 覆盖 隐藏与覆盖之间的关系 早绑定和晚 ...

  9. FAT文件系统规范v1.03学习笔记---4.文件和目录数据区之长目录项

    1.前言 本文主要是对Microsoft Extensible Firmware Initiative FAT32 File System Specification中文翻译版的学习笔记. 每个FAT ...

  10. flask（1）

    在Python中常用的web框架有flask.Django.tornado # -*- encoding: utf-8 -*- from flask import Flask #建立Flask对象 a ...