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

<!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. 设计模式浅谈----策略模式（c#及java实现）

    一.何为策略模式 策略模式是行为型模式的一种,主要用于需要使用不同的算法来处理不同的数据对象时使用,是一种可以在运行时选择算法的设计模式.也称为政策模式. 主要解决:在有多种算法相似的情况下,使用 i ...

  2. 使用expect的自动化交互

    Q:利用shell脚本实现ssh自动登录远程服务器? A:expect命令 #!/usr/bin/expect spawn ssh root@172.16.11.99 expect "*pa ...

  3. 关于cgi、FastCGI、php-fpm、php-cgi

    搞了好长时间的php了,突然有种想法,想把这些整理在一起,于是查看各种资料,找到一片解释的很不错的文章,分享一下-- 首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式 ...

  4. 前端工程之npm

    package.json是npm package的配置文件,存储当前项目相关的信息.如果下载npm中的包,包内会自带该文件.具体有如下属性: { "name" : "un ...

  5. 解决xshell连接不上Ubuntu

    起初,我虚拟上网是通过NAT上网的,xshell 可以正常连接Ubuntu . 后来有段时间,主机上网频繁断线,于是,我将网络适配器VM1,VM8禁用了. 还有一次,麻烦公司同事远程协助,虚拟机通过桥 ...

  6. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  7. mongo - 升级步骤

    升级步骤1. 关闭balancer登陆mongos,执行sh.stopBalancer(),或者 连接到mongos>use config>db.settings.update( { _i ...

  8. VR全景：720全景在线购物点亮你的眼球

    在今天,如果你还不了解什么叫做VR (Virtual Reality),那么你真的就已经Out了.现在的VR,正如当年的智能手机一样,传遍了整个世界,2016年,也被称作VR元年,各种各样的设备,以及 ...

  9. 一篇文章介绍GItHub的基础使用

    最近复习了一下Git的使用,简单总结了一些.以供以后查阅和同行参考. 一,安装 首先是Linux下: 打开shell ,输入 sudo apt-get install git-core 之后回车输入密 ...

  10. 在ROS中使用花生壳的域名服务

    ROS功能强大,也比较复杂,各个版本的脚本可能也大同小异,我现在使用的是6.37.3的版本. 添加Script 进入菜单System->Scripts. 点击加号,像图中这样,添加代码,我给这段 ...