css边框透明画三角形

简介:

wKioL1MnpTWD9sXQAABjmVQdXtc184.jpg


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strick//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html >
  < head >
   < title > New Document </ title >
   < meta  name = "Generator"  content = "EditPlus" >
   < meta  name = "Author"  content = "" >
   < meta  name = "Keywords"  content = "" >
   < meta  name = "Description"  content = "" >
   < style >
     div {
        height:1000px;
        width:1000px;
        background:gray;
     }
     #triangle {
        width:0px;
        height:0px;
        border-top:200px solid transparent  ;
        border-right:200px solid transparent ;
        border-bottom:200px solid pink;
        border-left:200px solid transparent ;
     }
   </ style >
  </ head >
  < body >
      < div >
      < div  id = "triangle" > </ div >
      </ div >
  </ body >
</ html >


     边框颜色值 transparent 用来设置透明边框,使边框不可见!





     本文转自kindIT 51CTO博客,原文链接:http://blog.51cto.com/kindit/1378408,如需转载请自行联系原作者




相关文章
|
5月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
5月前
|
前端开发 容器
给 CSS 盒子模型添加边框时,需要注意什么?
在给CSS盒子模型添加边框时,需要注意边框的宽度、样式和颜色,以及它如何影响盒子的总尺寸和布局。边框会增加盒子的总宽度和高度,可能需要调整其他属性以保持布局的完整性。
|
5月前
|
前端开发
如何使用css写三角形
如何使用css写三角形
48 4
|
5月前
|
前端开发
用纯 CSS 创建一个三角形
使用纯 CSS 可以通过边框技巧创建三角形。例如,要创建一个指向下方的等边三角形,可以将 `width` 和 `height` 设为 `0`,并通过透明的左右边框和有颜色的底边来形成三角形。
|
4月前
CSS3圆角边框
CSS3圆角边框
58 0
|
6月前
|
前端开发
CSS制作小三角形
CSS制作小三角形
33 1
|
5月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
|
7月前
|
前端开发
CSS——通过伪类来自定义四个角边框
CSS——通过伪类来自定义四个角边框
143 3
|
7月前
|
前端开发
如何使用css写三角形
如何使用css写三角形
55 1
|
7月前
|
前端开发
边框也疯狂:CSS创造令人瞩目的流光闪烁效果!
边框也疯狂:CSS创造令人瞩目的流光闪烁效果!