css三角形

css中的边框样式

由 守給你的承諾、 提交于 2019-11-29 15:35:43
在盒子模型中，盒子的边框是其重要的样式，通过边框我们可以很方便地看出盒子的长宽以及大小。边框的特性可以通过边框线，边框的宽度及颜色来呈现。 1 ，边框线 边框线指的是边框线条的样式，包括实线，虚线，点划线等。其具体的使用如下： border-style : none | hidden | dotted | dashed | solid | double | groove |ridge | inset | outset 例： div { width:300px; height:100px; border-style:solid; ｝ 在这里我们将一个长为 300px ，宽为 100px 的盒子设置了实线的边框，在默认的情况下边框也为实线。 我们也可以为某一个盒子设置多种不同的边框。此时要注明所要设置的边框的位置。如： border-top-style 设置上边框线 border-bottom-style 设置下边框线 border-left-style 设置左边框线 border-right-style 设置右边框线 2 ，宽度 设置边框的宽度可以使盒子的边框更加具有多样性，也方便了我们的观察。 border-width : medium | thin | thick | length 同边框线一样，要为一个盒子设置多个不同的边框宽度，要用到下面的语法： border-top

css绘制三角形

由 给你一囗甜甜゛ 提交于 2019-11-29 06:20:28
　　简单写一个空的div，设置款高为0，设置边框border 　　实现这个效果 　　 div{ width: 0; height: 0; /* 设置边框 */ border: 100px solid; /* 边框颜色 */ border-color: #f00 #000 #0f0 #00f } 　　只要将其他边框设为透明色，单独设置一个边框的颜色，就实现了一个三角形 div { width: 0; height: 0; /* 设置边框 transparent为透明 */ border: 100px solid transparent; /* 要设置的位置 */ border-bottom: 100px solid #f00; } 来源： https://www.cnblogs.com/zhangcheng001/p/11458801.html

css对话框气泡

由 ◇◆丶佛笑我妖孽 提交于 2019-11-28 19:48:31
最近闲来无事一直在研究css的伪元素就随手撸了个对话框好了话不多说看代码 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>dialog</title> <link rel="stylesheet" href="demo051.css"> </head> <body> <div class="dialog">Hello Everyone,I'm honglp</div> <!-- <div class="duk">YES</div> --> </body> </html> CSS代码 ​ .dialog { background: #6a6; margin: 50px auto; width: 300px; height: 25px; line-height: 25px; padding: 10px; border-radius: 6px; color: #fff; position: relative; } .dialog:

web前端入门到实战：CSS图形，各种神奇操作

由 三世轮回 提交于 2019-11-27 15:42:30
CSS 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能： clip-path shape-outside shape 的意思是图形，CSS shapes 也就是 CSS 图形的意思，也就是使用 CSS 生成各种图形（圆形、矩形、椭圆、多边形等几何图形）。 CSS3之前，我们能做的只有矩形，四四方方，条条框框。 CSS3 CSS3出来后，我们有了更广阔的施展空间，通过 border-radius border transform 伪元素配合 gradient 渐变 我们能够作出非常多的几何图形。 除去最常见的矩形，圆形（border-radius），下面稍微列举一些其他几何图形： 三角形 通常会使用透明的border模拟出一个三角形： .traingle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid yellowgreen; } 切角 《CSS Secret》里面的方法，采用多重线性渐变实现切角。 .notching { width: 40px; height: 40px;

CSS画三角形

由 懵懂的女人 提交于 2019-11-27 15:05:25
原理：利用CSS将一个div盒子的宽高设为0，边框（border）宽度设为一个较大值（如50px），颜色设为白色（white），上边框颜色设为你想要的颜色，下边框值设为none。代码如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Triangle</title></head><style type="text/css"> .Triangle{ width: 0px; height: 0px; border: 50px white solid; border-top-color: #0099ff; border-bottom: none; }</style><body> <div class="Triangle"></div></body></html>效果图： 也可以将上下边框反过来，下边框设为none，将三角形倒过来 来源： https://www.cnblogs.com/cxxBoo/p/11367651.html

css实现三角形

由 吃可爱长大的小学妹 提交于 2019-11-27 08:42:19
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <meta name="author" content="杨欣"> 9 <title>css三角形</title> 10 <style> 11 .triangle{ 12 width: 0; 13 height: 0; 14 border-width: 40px; 15 border-style: solid; 16 border-color: transparent transparent transparent red; 17 /*border-color的四个值代表上右下左，分别实现下左上右箭头 */ 18 } 19 </style> 20 </head> 21 22 <body> 23 <div class="triangle"></div> 24 </body> 25 26 </html> 来源： https://www.cnblogs.com/samsara-yx/p

css实现三角形

由 给你一囗甜甜゛ 提交于 2019-11-27 08:41:49
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .triangle_border_up{ display:block; width:0; height:0; border-width:0 10px 10px; border-style:solid; border-color:transparent transparent #fc0;/*透明 透明 黄*/ position:absolute; top:0px; left:0px; } .triangle_border_down{ display: block; width: 0; height: 0; border-width: 9px 9px 0; border-style: solid; border-color: #fc0 transparent transparent; position: absolute; top: 16px; left: 10%; } .triangle_border_left{ display:block; width:0; height:0; border-width:8px 8px 8px 0; border-style

css实现三角形

由 ￣綄美尐妖づ 提交于 2019-11-27 08:41:27
方法一：border 先看看四边 border 颜色不同且不透明时的效果： .rect1 { width: 0px; height: 0px; margin: auto; border: 20px solid red; border-left-color: blue; border-right-color: yellow; border-top-color: purple; } .rect2 { width: 0px; height: 0px; margin: auto; border-top: 20px solid red; border-left: 10px solid blue; border-right: 15px solid yellow; border-bottom: 25px solid purple; } .rect3 { width: 10px; height: 0px; margin: auto; border: 20px solid red; border-left-color: blue; border-right-color: yellow; border-top-color: purple; } .rect4 { width: 10px; height: 10px; margin: auto; border: 20px solid red; border

css实现三角形

由 ↘锁芯ラ 提交于 2019-11-27 08:40:36
　　重点2： 　　边框透明css属性： transparent 　　死亡的IE6中边框透明需要用到滤镜： /* _filter:chroma(color= #000000 ); 色度滤镜,让IE6实现透明borderColor.这里滤镜的颜色值是不可以简写的*/ HTML <div id="triangle"> <em class="t_a"></em> </div> CSS 代码 <style> div,em{ margin:0; padding:0;} #triangle{ margin:0 auto; width:500px;} .t_a{ width:0; height:0; font-size:0; line-height:0; display:block;} .t_a{ border-style:solid; border-width:40px; border-color:transparent transparent transparent #603; _filter:chroma(color=#000000);/*滤镜*/}</style> 这里为什么会使这个样子（ 宽高为0，边框设置下怎么就有三角形了呢？ ）还不是很明白～望 赐教～～ 来源： http://www.cnblogs.com/NetSos/archive/2010/11/25/1887562.html

css画三角形

由 馋奶兔 提交于 2019-11-27 05:49:52
在写前端时候，ui设计时候会把一些框框修饰一下，像三角形这种，这种使用图片的话就很占请求资源，所以一般这种情况下，能使用css3写出来的就尽量使用css控制。 在写三角形时候我们把握住边宽特性就能控制想要的样式,如下： <div class="item6"></div> .item6{ width: 0; height: 0; border-color: #f00 #0f0 #00f #ff0; border-style: solid; border-width: 32px 32px 32px 32px; } 在这里我们将举例几个 .item1{ width: 0; height: 0; border-color: #0839b8 transparent transparent transparent; border-style: solid; border-width: 32px 32px 0 0; } .item2{ width: 0; height: 0; border-color: #0839b8 transparent transparent transparent; border-style: solid; border-width: 32px 0 0 32px; } .item3{ width: 0; height: 0; border-color: #0839b8
订阅 css三角形