通过CSS的border绘制三角形

时间:2023-02-18 18:22:55

通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向。看下面各种图形,相信可能还有很多图形,大家都没见过。

先写出公共的样式:

 .border {
width:;
height:; border-color: transparent;
border-width: 1rem;
border-style: solid;
}

在上面的css基础上,添加下面的组合代码,将可以控制三角形的方向:

 border-left-color: #000;

通过CSS的border绘制三角形

 border-right-color: #000;

通过CSS的border绘制三角形

 border-top-color: #000;

通过CSS的border绘制三角形

 border-bottom-color: #000;

通过CSS的border绘制三角形

 border-left-color: #000;
border-bottom-color: #000;

通过CSS的border绘制三角形

 border-right-color: #000;
border-bottom-color: #000;

通过CSS的border绘制三角形

 border-right-color: #000;
border-top-color: #000;

通过CSS的border绘制三角形

 border-left-color: #000;
border-top-color: #000;

通过CSS的border绘制三角形

 border-top-color: #000;
border-bottom-color: #000;

通过CSS的border绘制三角形

 border-left-color: #000;
border-right-color: #000;

通过CSS的border绘制三角形

 border-top-color: #000;
border-left-color: #000;
border-bottom-color: #000;

通过CSS的border绘制三角形

 border-top-color: #000;
border-left-color: #000;
border-right-color: #000;

通过CSS的border绘制三角形

 border-bottom-color: #000;
border-left-color: #000;
border-right-color: #000;

通过CSS的border绘制三角形

 border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;

通过CSS的border绘制三角形

还有下面的这个效果,

 border-left-color: #000;
border-right-color: #000;
border-left-width: 3rem;

通过CSS的border绘制三角形

不同的组合产生不同的效果,大家可以尝试各种组合带来的效果。

通过CSS的border绘制三角形的更多相关文章

  1. CSS用border绘制三角形

    使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子 ...

  2. CSS之border绘制三角形

    用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px a ...

  3. css 利用border 绘制三角形. triangle

    1.基础三角形. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. css中border画三角形

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

  5. CSS学习笔记:利用border绘制三角形

    在前端的笔试.面试过程中,经常会出现一些不规则图形的CSS设置,基本上多是矩形外加一个三角形.利用CSS属性可以实现三角形的生成,主要利用上下左右的边距的折叠. 1.第一种图形: .box { wid ...

  6. 用CSS的border画三角形

    用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...

  7. border绘制三角形

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  8. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  9. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

随机推荐

  1. 用python在linux下获取网卡地址

    使用一个第三方库,名为psutil 代码如下: #!/usr/bin/python # -*- coding:utf-8 -*- import psutil def get_netcard(): ne ...

  2. Safari中的new Date&lpar;&rpar;格式化坑

    今天在测试的时候发现,在Chrome中的如下代码: new Date("2014-03-09"); 在Safari中报错invalid date.经过查阅资料找到类似的问答: st ...

  3. 安装 Oracle P6 EPPM 16 R1 database for 12C

    . 打开命令提示符(Windows)或 终端(如果UNIX)和连接数据库使用以下命令: sqlplus sys/password@dbservicename as sysdba 连接到: sqlplu ...

  4. POJ 2970 The lazy programmer(优先队列&plus;贪心)

    Language: Default The lazy programmer Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 1 ...

  5. photoshop:制作木板木纹

    1.设置颜色为木头相近颜色 2.滤镜->渲染->云彩 3.滤镜->杂色->添加杂色 4.滤镜->模糊->动感模糊 5.用矩形选取选取某块区域 6.滤镜->扭曲 ...

  6. iOS AvPlayer AvAudioPlayer音频的后台播放问题

    iOS 4开始引入的multitask,我们可以实现像ipod程序那样在后台播放音频了.如果音频操作是用苹果官方的AVFoundation.framework实现,像用AvAudioPlayer,Av ...

  7. ElasticSearch 学习记录之 分布式文档存储往ES中存数据和取数据的原理

    分布式文档存储 ES分布式特性 屏蔽了分布式系统的复杂性 集群内的原理 垂直扩容和水平扩容 真正的扩容能力是来自于水平扩容–为集群添加更多的节点,并且将负载压力和稳定性分散到这些节点中 ES集群特点 ...

  8. Python实现常用的数据结构

    Python中的数据结构   #巧用Python列表特性实现特定数据结构 #栈实现stack = []stack.push(x)stack.pop()stack[-1] #队列实现from colle ...

  9. maven项目(多模块)

    在eclipse下构建maven项目,该项目由多个子模块组成. 1.创建一个父项目 NEW -->project-->maven-->maven Project,点击下一步,进入ne ...

  10. Smart&sol;400开发上手3&colon; 练习实践

    练习题 在2006年1月1日之前入职且在职的营销员,给予年资补贴2000元: 符合以上条件的,再按以下标准一次性发放职级补贴: 职级代码 简称 补偿金额 A1 AD 6000 B1 SBM 5000 ...