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

<!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. SQLite 之 C#版 System.Data.SQLite 使用

    简介 SQLite简介 SQLite,是一款轻型的关系型数据库.它的设计目标是嵌入式. 它能够支持Windows/Linux/Unix等等主流的操作系统,同时能够跟很多程序语言相结合,比如 C++.C ...

  2. php如何应对秒杀抢购高并发思路

    我们常用QPS(Query Per Second,每秒处理请求数)来衡量一个web应用的吞吐率,解决每秒数万次的高并发场景,这个指标非常关键. 举个栗子:假设一个业务请求平均为100ms,同时系统内有 ...

  3. 计蒜客蓝桥杯模拟赛五J. 程序设计：放置守卫

    在一张 n 行 m 列的方格地图上放置一些守卫,每个守卫能守护上.左.右三个方向上相邻的方格和自己所在的方格.如下图,红色的方格放置守卫,绿色的方格为该守卫守护的区域. 现在要求在地图上放置若干个守卫 ...

  4. redis入门指南-第7章-管理

    7.1 持久化 1.RDB方式 2.AOF方式 Redis 持久化: 提供了多种不同级别的持久化方式:一种是RDB,另一种是AOF. RDB 持久化可以在指定的时间间隔内生成数据集的时间点快照(poi ...

  5. RFID智能感知摄像机推进智慧城市建设步伐

    随着智慧城市建设步伐的大力推进,各地的智慧城市建设取得了卓有成效的成果.物联网工程正在如火如荼地进行,顺应智慧城市物联网的发展大趋势,建设城市级的视频感知网,涉及治安.交通.教育等多方面综合传感应用, ...

  6. 2017CUIT校赛-线上赛

    2017Pwnhub杯-CUIT校赛 这是CUIT第十三届校赛啦,也是我参加的第一次校赛. 在被虐到崩溃的过程中也学到了一些东西. 这次比赛是从5.27早上十点打到5.28晚上十点,共36小时,中间睡 ...

  7. 今天重装系统后，Wdows更新提示“windows update当前无法检查更新，因为未运行服务。您可能需要重新启动计算机”

    到百度搜了常用的解决方法,就是用命令提示符,但对我的情况不管用,提示“拒绝访问”.后来在08绿软站的一篇文章中找到了解决办法.原文如下(我本人也是用的第四种方法解决的): 试了下面几种解决方法,第四种 ...

  8. 关于用css实现文本和图片垂直水平居中

    关于用css实现文本和图片垂直水平居中   一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...

  9. JavaSE教程-04Java中循环语句for，while，do···while-练习2

    1.编写一个剪子石头布对战小程序 该法是穷举法:将所有情况列出来 import java.util.*; public class Game{ public static void main(Stri ...

  10. 并发容器ConcurrentHashMap#put方法解析

    jdk1.7.0_79 HashMap可以说是每个Java程序员用的最多的数据结构之一了,无处不见它的身影.关于HashMap,通常也能说出它不是线程安全的.这篇文章要提到的是在多线程并发环境下的Ha ...