通过CSS的border绘制三角形

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

先写出公共的样式:

1 .border {
2     width: 0;
3     height: 0;
4
5     border-color: transparent;
6     border-width: 1rem;
7     border-style: solid;
8 }

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

1 border-left-color: #000;

1 border-right-color: #000;

1 border-top-color: #000;

1 border-bottom-color: #000;

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

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

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

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

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

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

1 border-top-color: #000;
2 border-left-color: #000;
3 border-bottom-color: #000;

1 border-top-color: #000;
2 border-left-color: #000;
3 border-right-color: #000;

1 border-bottom-color: #000;
2 border-left-color: #000;
3 border-right-color: #000;

1 border-top-color: #000;
2 border-right-color: #000;
3 border-bottom-color: #000;

还有下面的这个效果,

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

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

时间: 2024-10-08 19:35:05

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

CSS用border绘制三角形

使用border绘制三角形的思路,就是border值设置一个很大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

css 利用border 绘制三角形. triangle

1.基础三角形. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>全局css以及辅助css</title> 6 <style type="text/css"> 7 8 9 10 /***1: 初始样式设置*******/ 11 html, body, u

css中border画三角形

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus?">  <meta name="Author" content="">  <meta name=&qu

border绘制三角形

(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角形的假象. 这里就涉及到一个绝对定位的问题,上.下.左.右四种方向的三角形相对于父级定位是不同的.首先我们来看下,当定位都为0(left

css绘制三角形原理

1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .caret{ height:0;/*将宽高都设置为0*/ width:0; border:1

纯CSS绘制三角形

使用CSS绘制三角形 正三角形的绘制: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正三角形</title> 6 <style type="text/css"> 7 #triangle-up { 8 width: 0; 9 height: 0; 10

css绘制三角形

今天看到人家用css画了一个三角形,简简单单几行代码,惊讶css其实还有很多我们不知道的东西. 三角形其实还是可以用在很多地方的.其实就那么几行代码直接贴上: div.arrow-up {     width: 0;     height: 0;     border-left: 50px solid transparent;     border-right: 50px solid transparent;     border-bottom: 50px solid #2f2f2f;     

CSS绘制三角形的原理剖析

今天学习Bootstrap时候,看到按钮的向下三角形源码: 1 .caret { 2 display: inline-block; 3 width: 0; 4 height: 0; 5 margin-left: 2px; 6 vertical-align: middle; 7 border-top: 4px solid; 8 border-right: 4px solid transparent; 9 border-left: 4px solid transparent; 10 } 我对bord

使用CSS border 做三角形 口诀赠上

为了方便用border做三角形,省去那繁琐的思考三角朝向的问题,自己搞了个小口诀,分两篇,一篇是普通的三角,一篇是针对直角三角,口诀如下: 普通篇: 方向朝哪哪边无, 颜色反向来弥补 直角三角篇: 直角三角分两边, 哪侧无值朝哪边, 具体颜色来填充, 要看直角在哪边, 向上直角填上边, 向下直角填下边, top.bottom俩冤家, 从此永远不想见. 针对普通篇的效果如下: 代码如下: .toLeft { width: 0; height: 0; border-width: 30px 50px