border-bottom | 易学教程

css 利用border 绘制三角形. triangle

阅读更多关于 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:

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

阅读更多关于 web前端入门到实战：CSS图形，各种神奇操作

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;

设置border属性变化不同形状：三角形、圆形、弧形 2017-03-20

阅读更多关于设置border属性变化不同形状：三角形、圆形、弧形 2017-03-20

一、通过设置边框 ----正方形、三角形 <style> .c{ height: 0px; width: 0px; border-top: 50px solid red; border-right: 50px solid yellow; border-bottom: 50px solid green; border-left: 50px solid blue; } .c1{ height: 0px; width: 0px; border-top: 100px solid red; border-right: 50px solid yellow; border-bottom: 50px solid green; border-left: 50px solid blue; } 注：c1：div没有高度，上：100px; 下左右：50px （上边错了） .c2{ height: 0px; width: 0px; border-top: 0px solid red; border-right: 0px solid yellow; border-bottom: 50px solid green; border-left: 50px solid blue; } .e{ height: 50 px; width: 50 px; border-top: 40px solid red;

用css画图标

阅读更多关于用css画图标

css3的属性 transform(转换) 用途很广泛，功能也很强大，为了熟悉它的各种转换方式(平移 translate，旋转 rotate，扭曲 skew，放缩 scale)，我做了一些平常常用的一些简单的图标。这些图标很多是通过三角形来拼贴起来的，所以我们需要知道怎么样画三角形。 1. 我们要将该 div 的 width 和 height 都设置为 0，三角形是通过设置 border 来实现； 2. 通过我们需要画成的三角形的目标分析，这个三角形的朝向(只针对规则的朝向：上、右、下、左、上左、上右、下右、下左，不规则的朝向可以通过旋转来实现)； 3. 如果是上、右、下、左四种中的一种，将朝向的对面的 border-color 设置为我们需要的颜色，该朝向的这一边不设置 border，其它两边的 border-color 设置为 transparent； 4. 如果是上左、上右、下右、下左中的一种，以上右为例，设置相关的两边：上和右的 border-color 设置成我们想要的颜色，其它两边的 border-width 设置成 transparent。 5. border-width 的值就是底边长和高。看几个例子：例1：图形：该图形中，只有上方位有边，这个边就是三角形的底边了，底边长为 3.6em(左右相加)，高为 2em。右、下、左没有边。于是 border-top

通过CSS的border绘制三角形

阅读更多关于通过CSS的border绘制三角形

http://www.cnblogs.com/front-end-1149980941/p/5885628.html 通过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: