（根据调节边框的宽度来调节三角形形状）

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>

演示代码

</title>

<style>

.a {width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid red;}

</style>

</head>

<body>

<div class="a">

</div>

</body>

</html>

<div id="tri"></div>

#tri{

width: 0px;

height: 0px;

border-top: 400px solid red;

border-right: 400px solid blue;

border-bottom: 400px solid green;

border-left: 400px solid yellow;

}

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<style type="text/css">

.div{

  font-size:16px;

  color:#fff;

  height: 0;

  width: 100px;

  line-height:30px;

  padding-left:5px;

  border-width: 0px 30px 30px 0px;

  border-style: none solid solid;

  border-color: transparent transparent #111;

}

</style>

<body>

<div class="div"></div>

</body>

</html>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="UTF-8" />

  <title>Document</title>

  <style type="text/css">

   .trapezoid{

       border-bottom: 100px solid red;

      border-left: 50px solid transparent;

      border-right: 50px solid transparent;

       width: 100px;

     }

   </style>

 </head>

 <body>

  <div class="trapezoid"></div>

 </body>

</html>

css画三角形，梯形的更多相关文章

  1. css画三角形原理解析

    <div id="div1"></div><div id="div2"></div><div id=&qu ...

  2. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  3. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  4. HTML 和 CSS 画三角形和画多边行基本原理及实践

    基本 HTML 标签 <div class = 'test'></div> 基本 CSS 代码 .test { width: 100px; height: 100px; bac ...

  5. 如何用CSS画三角形

    很多时候页面都需要一个或者多个小型三角形!多数人直接用PS扣个图片预览 下面用CSS简单画几个最终效果如下图 <div class="border-all-color"> ...

  6. 理解纯CSS画三角形

    pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...

  7. 用css画三角形

    当我们给某个图片做一个弹出层的时候,假设要让我们的弹出层显示一个小箭头,能够用css来画 用div来演示 div{ border:12px solid; berder-color:transparen ...

  8. CSS 画三角形、圆

    <div class="square"></div> <style> .square { height: 0px; width: 0px; bo ...

  9. 2016/2/24 css画三角形 border的上右下左的调整 以及内区域的无限变小 边界透明

    网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. 今天 ...

随机推荐

  1. PHP. 01. C/S架构、B/S架构、服务器类型、服务器软件、HTTP协议／服务器、数据库、服务器web开发、PHP简介／常见语法、PHPheader（）、 PHP_POST/GET数据获取和错误处理

    C/S架构 Client/Server 指客户端,服务器 架构的意思 优点:性能性高:可将一部分的计算工作放在客户端上,服务器只需处理出局即可   洁面炫酷,可使用更多系统提供的效果 缺点:更新软件需 ...

  2. 14、Iterator跟ListIterator的区别

    14.Iterator与ListIterator的区别 在使用List,Set的时候,为了实现对其数据的遍历,会经常使用到Iterator(跌代器).使用跌代器,不需要干涉其遍历的过程,只需要每次取出 ...

  3. Github+Hexo,搭建专属网站

    前言 记得从大二开始,就一直想搭个专属网站,当时使劲抠页面[前端页面是从QQ空间抠的,现在想抠估计没这么容易了],写代码,忙活半天才把程序弄好. 可惜最终项目还是没上线,因为当时有两问题绕不开 需要购 ...

  4. 在.Net下使用redis基于StackExchange.Redis

    研究了下redis在.net下的使用,因为以前在java上用redis用的是jedis操作,在.net不是很熟悉,在网站上也看了一部分的.net下redis的使用,大部分都是ServiceStack. ...

  5. js写插件教程

    <!doctype html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. bug 修复:上传库存时前端回发file_name参数丢失;

    # tmp_file = os.path.join(os.path.abspath('youcart/tmp'), json.loads(request.data).get('file_name')) ...

  7. ImageView最大高度和宽度失效解决方案

    解决方案 做RecyclerView的 item 布局时,用到imageview ,可是图片按原始尺寸显示,不规范. 所以去google了一下imageview的宽高限制,就试了下maxheight/ ...

  8. 一些java考过的测试题和自己制作模拟服务端和客户端

    媒体 1,java环境变量: PATH: .;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;  CLASSPATH: .;%JAVA_HOME%\jre\lib\rt.jar ...

  9. 一键帮你复制多个文件到多个机器——PowerShell小脚本（内附PS远程执行命令问题解析）

    作为一个后台程序猿,经常需要把一堆程序集(DLL)或者应用程序(EXE)复制到多个服务器上,实现程序的代码逻辑更新,用以测试新的功能或改动逻辑.这里给大家介绍一个自己实现的PowerShell脚本,方 ...

  10. [转]tomcat部署（1）

      阅读目录 1 目录结构 2 部署 3 发布 4 测试 本篇参考Tomcat官方文档:<First Webapp>翻译,并结合自己的开发经验介绍关于tomcat部署以及发布的相关内容. ...