纯css画直角三角形
所有的三角形,都是通过盒子模型来设定。
border(边框)的不同大小来决定
border-width: 边框的宽度
border-style: 边框的样式
border-color: 边框的颜色
1:2个颜色
<!DOCTYPE html>
<html>
<head>
<title>css的直角三角形</title>
<style type='text/css'>
.content-trigon-zhijiao {
width: 0px;
height: 0px;
border-color: red blue blue red;
border-width: 50px 50px 50px 50px;
border-style: solid;
}
</style>
</head>
<body>
<div class="title-trigon-zhijiao">css的直角三角形</div>
<div class="content-trigon-zhijiao">
<span><i></i></span>
</div>
</body>
</html>
2:
3:
4:
5:
6:
盒子模型:
可以参考:
以下是比较全面的css绘制的图形:
https://css-tricks.com/examples/ShapesOfCSS/
纯css画直角三角形的更多相关文章
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
- CSS之纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 【原创】纯CSS画黄金梅丽号!
代码如下 <!DOCTYPE html> <!-- saved from url=(0055)http://jadyoap.bj.bcebos.com/ife%2FcssCatAni ...
- 纯CSS画的基本图形
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 用纯CSS画大白
纯CSS打造网页大白知识点: 首先要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinge ...
- 纯css 画气泡
我们知道运用css可以绘画出各式各样的形状:三角形,圆形,正方形,椭圆形,平行四边形等等,而通过他们之间进行两两组合可以变换出各种意想不到的效果图,气泡框就是其中一个.最简单的气泡框就是一个矩形框+一 ...
- 理解纯CSS画三角形
pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...
- 8.17 纯css画一个着重号图标
今天看到一个同事写的着重号图标,我以为是图片,仔细一看,是span标签!哇!!学习一下哈哈 图标长这样: CSS代码: .hint{ display: inline-block; width: 20p ...
随机推荐
- nginx(二)nginx的安装
下载 nginx官网下载地址 把源码解压缩之后,在终端里运行如下命令: ./configure make make install 默认情况下,Nginx 会被安装在 /usr/local/nginx ...
- Go语言中的Iota
一.复习常量 提到Iota这个关键字,就必须要复习一下Go语言的常量. 1.Go语言的常量一般使用const声明 2.Go语言的常量只能是布尔型.数字型(整数型.浮点型和复数)和字符串型 3.Go语言 ...
- oracle表的操作SQL语句
这篇文章的内容包括:表的増删改查,字段的増删改查,主键.外键.唯一.非空.默认约束的増删改 查看自己用户的所有表: select * from user_tab_comments; www. ...
- jzoj6101. 【GDOI2019模拟2019.4.2】Path
题目链接:https://jzoj.net/senior/#main/show/6101 记\(f_i\)为从\(i\)号点走到\(n\)号点所花天数的期望 那么根据\(m\)条边等可能的出现一条和一 ...
- 重建docker实例
1.显示当前运行的docker实例: [root@docker-test /]# docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS PORT ...
- [jzoj]4271. 【NOIP2015模拟10.27】魔法阵(37种转移的dp)
题意不说 应该这辈子都不会忘记了... 这是我人生中做的最SB的一道DP题. 真的打的我心态崩了.... 可是竟然被我调出来了..... 也是没谁了... 我们设\(F[i][j][S]\)表示到第\ ...
- makefile :=和+=
经常有人分不清= .:=和+=的区别 这里我总结下做下详细的分析: 首先你得清楚makefile的运行环境,因为我是linux系统,那么我得运行环境是shell 在Linux的shell里,shel ...
- django系列5:视图
在Django中,网页和其他内容由视图提供.每个视图都由一个简单的Python函数(或基于类的视图的方法)表示.Django将通过检查所请求的URL(确切地说,是域名后面的URL部分)来选择视图. 在 ...
- [USACO10DEC] Treasure Chest
题目链接 90 Points:智障的区间 DP--设 dp[i][j] 表示区间 [i, j] 能取的最大价值,但我还是 sd 地开了第三维表示先取还是后取的价值. 交上去以为能 A,结果 #2 开心 ...
- 剑指Offer_编程题_20
题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. /* struct TreeNode { int val; struct TreeNode *left; struct TreeN ...