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, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; }
 12
 13
 14
 15
 16         /*******2: 清除浮动******/
 17
 18         /*IE6, IE7 生效*/
 19         .floatfix{
 20             *zoom:1;
 21         }
 22
 23         /*其他浏览器*/
 24         .floatfix:after{
 25             content:"";
 26             display:table;
 27             clear:both;
 28         }
 29
 30         /***3: 超出长度显示省略号. 还需要设置width**/
 31
 32         .ellipsis {
 33             text-overflow: ellipsis;
 34             overflow: hidden;
 35             white-space: nowrap;
 36         }
 37
 38
 39         .all {
 40             width: 80%;
 41             margin: 30px auto;
 42         }
 43
 44         .row {
 45             border: 1px solid black;
 46             margin: 10px;
 47             padding: 10px;
 48         }
 49
 50         p {
 51             color: red;
 52         }
 53
 54
 55         /*****4: 三角****************/
 56
 57         .triangle {
 58             width: 0;
 59             height: 0;
 60             border-top: 20px solid #EEB422;
 61             border-right: 20px solid #C0FF3E;
 62             border-bottom: 20px solid #A020F0;
 63             border-left: 20px solid #7CFC00;
 64         }
 65
 66         .triangle-up4 {
 67             width: 0;
 68             height: 0;
 69             border-top: 20px solid transparent;
 70             border-right: 20px solid transparent;
 71             border-bottom: 20px solid #A020F0;
 72             border-left: 20px solid transparent;
 73         }
 74
 75         .triangle-down4 {
 76             width: 0;
 77             height: 0;
 78             border-top: 20px solid #EEB422;
 79             border-right: 20px solid transparent;
 80             border-bottom: 20px solid transparent;
 81             border-left: 20px solid transparent;
 82         }
 83
 84         .triangle-left4 {
 85             width: 0;
 86             height: 0;
 87             border-top: 20px solid transparent;
 88             border-right: 20px solid #C0FF3E;
 89             border-bottom: 20px solid transparent;
 90             border-left: 20px solid transparent;
 91         }
 92
 93         .triangle-right4 {
 94             width: 0;
 95             height: 0;
 96             border-top: 20px solid transparent;
 97             border-right: 20px solid transparent;
 98             border-bottom: 20px solid transparent;
 99             border-left: 20px solid #7CFC00;
100         }
101
102
103
104         .triangle-up {
105             width: 0;
106             height: 0;
107             border-right: 20px solid transparent;
108             border-bottom: 40px solid #A020F0;
109             border-left: 20px solid transparent;
110         }
111
112         .triangle-down {
113             width: 0;
114             height: 0;
115             border-top: 40px solid #EEB422;
116             border-right: 20px solid transparent;
117             border-left: 20px solid transparent;
118         }
119
120         .triangle-left {
121             width: 0;
122             height: 0;
123             border-top: 20px solid transparent;
124             border-bottom: 20px solid transparent;
125             border-left: 40px solid #7CFC00;
126         }
127
128         .triangle-right {
129             width: 0;
130             height: 0;
131             border-top: 20px solid transparent;
132             border-bottom: 20px solid transparent;
133             border-right: 40px solid #C0FF3E;
134         }
135
136         .triangle-left-bottom {
137             width: 0;
138             height: 0;
139             border-top: 40px solid transparent;
140             border-left: 40px solid #7CFC00;
141         }
142
143         .triangle-right-bottom {
144             width: 0;
145             height: 0;
146             border-top: 40px solid transparent;
147             border-right: 40px solid #C0FF3E;
148         }
149
150         .triangle-left-up {
151             width: 0;
152             height: 0;
153             border-bottom: 40px solid transparent;
154             border-left: 40px solid #7CFC00;
155         }
156
157         .triangle-right-up {
158             width: 0;
159             height: 0;
160             border-bottom: 40px solid transparent;
161             border-right: 40px solid #C0FF3E;
162         }
163
164
165     </style>
166
167     <!-- 引入js文件 -->
168     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
169
170 </head>
171 <body>
172
173
174     <div class="all">
175
176         <hr>
177         <p>使用border的4个方向</p>
178         <div class="row">
179             <span>四个三角</span>
180             <div class="triangle">
181             </div>
182         </div>
183
184         <div class="row">
185             <span>四个三角-上</span>
186             <div class="triangle-up4">
187             </div>
188         </div>
189
190         <div class="row">
191             <span>四个三角-下</span>
192             <div class="triangle-down4">
193             </div>
194         </div>
195
196         <div class="row">
197             <span>四个三角-左</span>
198             <div class="triangle-left4">
199             </div>
200         </div>
201
202         <div class="row">
203             <span>四个三角-右</span>
204             <div class="triangle-right4">
205             </div>
206         </div>
207
208         <hr>
209         <p>使用border的3个方向</p>
210         <div class="row">
211             <span>上三角</span>
212             <div class="triangle-up">
213             </div>
214         </div>
215         <div class="row">
216             <span>下三角</span>
217             <div class="triangle-down">
218             </div>
219         </div>
220         <div class="row">
221             <span>左三角</span>
222             <div class="triangle-left">
223             </div>
224         </div>
225         <div class="row">
226             <span>右三角</span>
227             <div class="triangle-right">
228             </div>
229         </div>
230
231         <hr>
232         <p>使用border的2个方向</p>
233         <div class="row">
234             <span>左下角</span>
235             <div class="triangle-left-bottom">
236             </div>
237         </div>
238         <div class="row">
239             <span>右下角</span>
240             <div class="triangle-right-bottom">
241             </div>
242         </div>
243
244         <div class="row">
245             <span>左上角</span>
246             <div class="triangle-left-up">
247             </div>
248         </div>
249         <div class="row">
250             <span>右上角</span>
251             <div class="triangle-right-up">
252             </div>
253         </div>
254
255
256
257     </div>
258
259
260
261
262 </body>
263 </html>

显示:

注意:

1)border 可以设置四个, 出现的就是四个三角 , 四个三角-上, 四个上角-下, 四个三角-左 , 四个三角-右

2) border 可以设置三个, 出现的是上三角, 下三角, 左三角, 右三角

4)border 可以设置两个, 出现的是左下角, 右下角 , 左上角, 右上角

这是因为?

参考链接:

border解决方案

CSS-三角形及其原理

时间： 2024-12-18 04:29:44

css 利用border 绘制三角形. triangle的相关文章

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绘制三角形

通过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

css中border画三角形

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

利用Quartz2D-contex绘制三角形

//获取上下文 CGContextRef context =UIGraphicsGetCurrentContext(); //线条加粗 CGContextSetLineWidth(context , 5); //设置背景颜色 [[UIColor grayColor]set]; UIRectFill([self bounds]); //利用path进行绘制三角形 //标记 CGContextBeginPath(context); //设置起点 CGCont

利用Border画三角形

边框 1.边框其实并不是矩形,而是梯形 2.利用边框画三角形: div.a{ width:0px; height:0px; border:10px white solid; border-top-color:red;} div.b{ width:0px; height:0px; border:5px white solid ; border-left-color:red;} 效果如下:

如何利用border书写三角形，建议考虑正方形

网页做三角形图片,你还在拿ps调整吗?out了,老铁,来和我一起脑海畅想一个正方形是由4个等腰直角三角形构成,然后我想保留上边的三角形,那下边.左边.右边的三角形就没了(设置背景色transparent或者与背景相近的颜色),最终结果就是一个保留上边,方向朝下的三角形,需要注意一点的是设置的css样式中width=0,如果不是就不能构成正方形,而是一个梯形:此外还可以通HTML实体里的三角形符号,朝上▲ 10 padding: 0; 11 } 12 /* .box1,.box2,.box3,.b

Android OpenGL ES（十）绘制三角形Triangle .

三角形为OpenGL ES支持的面,同样创建一个DrawTriangle Activity,定义6个顶点使用三种不同模式来绘制三角形: float vertexArray[] = { -0.8f, -0.4f * 1.732f, 0.0f, 0.0f, -0.4f * 1.732f, 0.0f, -0.4f, 0.4f * 1.732f, 0.0f, 0.0f, -0.0f * 1.732f, 0.0f, 0.8f, -0.0f * 1.732f, 0.0f, 0.4f, 0.4f * 1.73

CSS利用border绘制图性

绘制梯形 width:10px; border-top:10px solid red; border-right:10px solid transparent; border-left:10px solid transparent; border-bottom:10px solid transparent; 绘制三角形: width:0px; border-top:10px solid red; border-right:10px solid transparent; border-left:1

CSS 利用border三角形绘制方法

CSS 三角形绘制方法,这里面的transparent比较重要,有和没有影响很大: 原理:这个div是由4个三角形组成,每个三角对应一个border,隐藏其它3个border,就可以得到一个三角形. 复制代码代码如下: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; /*border: 50px