CSS深入了解border：利用border画三角形等图形
三角形实际上是border的产物 我们正常使用的border都是四边一个颜色，当我们把四边换上不同颜色 那么你就会发现，三角来了~！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3三角形画法</title>
<style>
.content{
width: 0px;
height: 0px;
margin: 50px auto 0px;
border-width: 150px;
border-color: #666 #CC0066 #CC9966 #FFCC33;
border-style: solid;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
原来border每个边，形成了三角形。 之前一直很奇怪，为什么每次width 和 height 都是0px? 我想原因已经不言而喻。 当然我们应该试一下看看 ~
可以给加上padding：50px；中间的白色区域就是100px
再加上border-radius：50%；会变成这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3三角形画法</title>
<style>
.content{
width: ;
height: ;
margin: 50px auto 0px;
/*没有修改width 和 height 而是用了padding*/
padding: 50px;
border-width: 150px;
border-color: # #CC0066 #CC9966 #FFCC33;
border-style: solid;
/*还可以把border-radius设置一个玩玩*/
-webkit-border-radius: %;
-moz-border-radius: %;
border-radius: %;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
我们看到了三角，却拿不到三角？ 很简单，我们知道border-color 值对应的边分别为 top 、right、bottom、left ；现在我们不想要那个，就把那个边透明。
当然我们要的三角通常不是这样的，现在，我们只要让border-color和border-width搭配，就可以变换各种三角。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3三角形画法</title>
<style>
.outer{
display: inline-block;
margin: 50px;
text-align: center;
font-size: 24px;
line-height: 40px;
}
.content{
width: ;
height: ;
border-style: solid;
}
.content-{
/*不要上面的三角 同时左边和右边不要有颜色 就是可爱的正三角*/
border-width: 0px 100px 100px 100px;
border-color: transparent transparent #CC9966 transparent;
}
.content-{
/*左边的三角 就是右边的不要了 上下三角透明 一点毛病都没有*/
border-width: 100px 0px 100px 100px;
border-color: transparent transparent transparent #CC9966;
}
.content-{
border-width: 100px 100px 100px 100px;
border-color: transparent #CC9966 #CC9966 transparent;
}
</style>
</head>
<body>
<div class="outer">
<div class="content content-1"></div>
<div>下三角</div>
<div class="content content-2"></div>
<div>左三角</div>
<div class="content content-3"></div>
<div>右直三角</div>
</div>
</body>
</html>
注意：如果是采用border-weight不变，使对应的边的color透明的话，那么就是边框的尺寸会不变。
至于正三角、不规则三角等，只要知道它的原理，都是很可以画出来的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3三角形画法</title>
<style>
div{
width: 0px;
height: 0px;
border-style: solid;
margin: 30px auto 0px;
}
.content-{
/*梯形借助了padding*/
padding: 10px 20px;
border-width: 0px 50px 50px 50px;
border-color: transparent transparent #CC9966 transparent;
}
.content-{
/*padding做梯形*/
padding: 20px 10px;
border-width: 50px 50px 50px 0px;
border-color: transparent #CC9966 transparent transparent;
/*喇叭效果*/
-webkit-box-shadow: inset 15px #;
-moz-box-shadow: inset 15px #;
box-shadow: inset 15px #;
}
.content-{
width: 100px;
height: 100px;
background-color: #CC9966;
border:none;
/*平行四边行完全可以用旋转实现*/
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);
}
</style>
</head>
<body>
<body>
<div class="content-1"></div>
<div class="content-2"></div>
<div class="content-3"></div>
</body>
</body>
</html>
CSS深入了解border：利用border画三角形等图形的更多相关文章
- css伪元素before/after和画三角形的搭配应用
想要实现的效果如下: 第一步:如何用css画出三角形? /* css画三角形 */ .sanjiao{ ; border-top:40px solid red; border-bottom:40px ...
- assembly x86(nasm)画三角形等图形的实现（升级版）
https://www.cnblogs.com/lanclot-/p/10962702.html接上一篇 本来就有放弃的想法,可是有不愿退而求次, 然后大神室友写了一个集海伦公式计算三角形面积, 三点 ...
- CSS学习笔记：利用border绘制三角形
在前端的笔试.面试过程中,经常会出现一些不规则图形的CSS设置,基本上多是矩形外加一个三角形.利用CSS属性可以实现三角形的生成,主要利用上下左右的边距的折叠. 1.第一种图形: .box { wid ...
- 用CSS border相关属性画三角形
效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2l3aV9jb2Rlcg==/font/5a6L5L2T/fontsize/400/fill/I0J ...
- 用border或者div制作三角形等图形
一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 具体代码如下: 通过上述代码,div的具体样式如下: 现在在上面基础上, 我们把div的宽高度都设为0时, 现在我们再次查看效果,如下图: 这时 ...
- assembly x86(nasm)画三角形等图形的实现
参考了一位大佬的博客 https://blog.csdn.net/qq_40298054/article/details/84496944传送门 https://blog.csdn.net/qq_40 ...
- WebGl 利用drawArrays、drawElements画三角形
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- css3画三角形的原理
以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...
- 利用border和伪类画出三角形 ps：好久没写博客了。。。
有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...
随机推荐
- 概率论中常见分布总结以及python的scipy库使用：两点分布、二项分布、几何分布、泊松分布、均匀分布、指数分布、正态分布
概率分布有两种类型:离散(discrete)概率分布和连续(continuous)概率分布. 离散概率分布也称为概率质量函数(probability mass function).离散概率分布的例子有 ...
- 【十月のA Letter to 后辈菌】
文化课没什么好说的,那就不说了吧(^▽^) 以下送给下两级的学弟学妹们: 马上就要NOIP了,现在自己从戏中人变成了看戏人.不管高一还是高二,我感觉只要能走到这一步就很了不起了,不管结果如何,比赛过程 ...
- luoguP2231 [HNOI2002]跳蚤
题目链接 bzoj1220: [HNOI2002]跳蚤 题解 根据裴蜀定理,不定方程的解为未知数的gcd,所以选取的n个数的gcd为1 那么n - 1个数保证没有公约数为m的约数,枚举质因数容斥 质因 ...
- [BZOJ4565][HAOI2016]字符合并(区间状压DP)
https://blog.csdn.net/xyz32768/article/details/81591955 首先区间DP和状压DP是比较明显的,设f[L][R][S]为将[L,R]这一段独立操作最 ...
- Mysql 千万级快速查询|分页方案
1.简单的 直接查主键id SELECT id FROM tblist WHERE LIMIT 500000,10 2对于有where 条件,又想走索引用limit的,必须创建一个索引,将where ...
- HDU 3161 Iterated Difference 暴力
Iterated Difference Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- HDU 4499 Cannon （搜索）
Cannon Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total Subm ...
- 能够区分光驱的类型么？比如CDROM、DVD还是CD-RW
http://www.jubao163.com/it/bianchengwendang/2007-06-17/14948.shtml typedef struct _SCSI_PASS_THROUGH ...
- hybrid App h5二级页面返回的时候保持与一级页面浏览的位置一致
最近在开发公司hybrid app的时候,需要将原本原生的配置中心模块统一变更为H5,做完之后从测试那里反馈回来这样一个问题,当滑到页面底部或中部的时候进入子页面进行设置,返回的时候页面应该定位到离开 ...
- Redis的主从复制设置与安装
1 验证redis的主从复制,将过程抓图 实验步骤 A. 安装Redis B. 启动Master Redis C. 创建redis-slave.conf配置文件 改动Redisport和打开sl ...