<!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. Luogu P4479 [BJWC2018]第k大斜率

    一道清真简单的好写的题 Luogu P4479 题意 求点集两两连出的直线中斜率第$ k$大的直线 $ Solution$ 二分答案,设$x_j \geq x_i$ 若点$ (x_i,y_i)$和点$ ...

  2. 开源RPC Jupiter

    ref https://github.com/fengjiachun/doc/tree/master/netty https://budairenqin.iteye.com/ https://blog ...

  3. Javascript入门(四)条件控制语句

    一.条件控制语句 1. if <script type="text/javascript"> var num = 1 if( num == 3 ){ alert(&qu ...

  4. python - psutil 系统信息模块

    # .psutil是一个跨平台库能够轻松实现获取系统运行的进程和系统利用率(包括CPU.内存.磁盘.网络等)信息. # 它主要用来做系统监控,性能分析,进程管理. # 它实现了同等命令行工具提供的功能 ...

  5. shiro-redis实现session存储到redis

    shiro-redis开源项目已经很好的将shiro与redis整合到一起,实现了将session存入redis,可以方便的用于session共享实现集群部署. git地址:https://githu ...

  6. Ubuntu 16.04 Matlab2015b安装

    小白一个,安装过程参考了一大堆教程. 这里记录一下. 一.安装 1) sudo mkdir /media/matlab 2) cd 到下载的镜像文件所在文件夹 3) 挂载镜像: sudo mount ...

  7. HTTP协议02-请求和响应的报文构成

    HTTP协议和TCP/IP协议族内的其他众多协议相同,用于客户端与服务器之间的通信,请求访问文本或图像等资源的一端+称为客户端,而提供资源响应的一端称为服务端. 应用HTTP协议时,请求必定是客户端发 ...

  8. unity实现剧情对话

    using UnityEngine; using System.Collections; public class Test : MonoBehaviour { private string show ...

  9. 解决win10中chm内容显示为空白的问题

    在win10中打开chm文件,一般会是这个效果,内容显示为空白: 解决这个问题的方法是,在打开chm文件时,会有个安全警告的询问对话框,如下: 将[打开此文件前总是询问(W)]复选框的勾去掉,就OK了 ...

  10. hibernate框架学习之多表查询helloworld

    package cn.itcast.h3.hql; import java.util.List; import org.hibernate.Query; import org.hibernate.Se ...