css代码整理,完毕三角形与平行四边形

用 CSS 已毕三角形与平行四边形

2015/08/18 · CSS · 1
评论亚洲必赢官网, ·
CSS3

原稿出处:
邹润阳(@jerry蛋蛋哥)   

日前在逛某个技术网站的时候,感觉作品主要词上的体裁好酷炫啊。于是自己将这种写法照搬到了自家的博客中,也许近期逛过我博客的伴儿已经发现了它出现在何处了——分页的体裁。来张截图:

亚洲必赢官网 1

你在首页的底层也得以阅览这么一个分页栏;是或不是看上去还不错?下边就来看看那是如何完结的啊~

前不久在逛某个技术网站的时候,感觉作品首要词上的样式好酷炫啊,分页的体制。来张截图:

一、给div加border来实现

css代码整理、收集,css代码收集

重整了一下以前用到过的css代码,已毕一种功能可能有好五种写法,我那边整理了一晃本人个人觉得包容性比较好,结构相比简单的代码……如有写得有有失常态态的地点敬请前辈们率领赐教一下,二弟不胜感激!此学习笔记是动态的——我从此发现有好的代码段会陆陆续续整理添加上去。

 

css:ellipsis省略号

<style>
.news{width:320px; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('ellipsis.xml#ellipsis'); -ms-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; overflow:hidden;}
.news a{white-space:nowrap;}
</style>  

<div class="news">
    <a href="javascript:void(0);">你好,我是个css省略号,支持各种浏览器,包括大IE6</a>
    <a href="javascript:void(0);">你好,我是个css省略号,支持各种浏览器,包括大IE6</a>
</div>

 

鼠标移过去图片渐渐变暗(亮)一点

也就是用到了晶莹剔透(opacity),渐变(transition)已毕,如下是变暗的状态:

<style>
.link_img{display:inline-block; width:auto; height:auto;}
.link_img:hover{  background-color:#000;}
.link_img:hover img{ display:block; filter:alpha(opacity=80); opacity:0.8; transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out;}
</style>

<a href="javascript:void(0);" class="link_img"><img src="images/zy_19.jpg" /></a>
<a href="javascript:void(0);" class="link_img"><img src="images/pro3.jpg" /></a>

 

css:border达成的三角

如要已毕汽包,如乐乎新浪里的亚洲必赢官网 2,博客园里用到的是的是特殊字符“◆”,亚洲必赢官网 3,能促成包容到IE6,html代码结构上不简洁了,在html里要多写了class为”WB_arrow“的一层代码,如图:亚洲必赢官网 4

要简洁点,只能够用border与伪类before,after了,附代码如下:

亚洲必赢官网 5 1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http
://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> 2 <html
xmlns=”css代码整理,完毕三角形与平行四边形。; 3 <head> 4 <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> 5
<title>css制作三角形</title> 6 <style type=”text/css”>
7 body{background-color:#E8E8E8;} 8 .triangle1{ display:inline-block;
width:20px; height:20px; border-width:20px 30px 40px 50px;
border-style:solid; border-color:green yellow blue red;} 9 .triangle2{
display:inline-block; width:0; height:0; border-width:20px 30px 40px
50px; border-style:solid; border-color:transparent yellow blue red;} 10
.triangle3{ display:inline-block; width:0; height:0; border-width:20px
30px 40px 50px; border-style:dashed solid solid solid;
border-color:transparent yellow blue red;} 11 .triangle4{
display:inline-block; width:0; height:0; _line-height:0;
border-width:20px 30px 40px 50px; border-style:dashed solid solid solid;
border-color:transparent yellow blue
red;}/*对此ie6要安装一下line-height,以及透明的border-style要设置成dashed*/
12 13 .rightdirection{ display:inline-block; width:0;height:0;
_line-height:0; border-width:20px; border-style:dashed dashed dashed
solid; border-color:transparent transparent transparent #333; } 14
.bottomdirection{ display:inline-block; width:0;height:0;
border-width:20px; border-style:solid dashed dashed dashed;
border-color: #333 transparent transparent transparent; } 15
.leftdirection{ display:inline-block; width:0;height:0; _line-height:0;
border-width:20px; border-style:dashed solid dashed dashed;
border-color: transparent #333 transparent transparent; } 16
.topdirection{ display:inline-block; width:0;height:0;
border-width:20px; border-style:dashed dashed solid dashed;
border-color: transparent transparent #333 transparent; } 17 18 .dome{
margin-top:10px; width:200px; padding:10px; text-align:center;
background-color:#ccc; border:1px solid #666; position:relative;
left:30px;} 19 .dome:before{ display:block; content:””; border-width:8px
10px; border-style:dashed solid dashed dashed; border-color:transparent
#666 transparent transparent; position:absolute; top:10px; left:-20px;
z-index:1; } 20 .dome:after{ display:block; content:””; border-width:8px
10px; border-style:dashed solid dashed dashed; border-color:transparent
#ccc transparent transparent; position:absolute; top:10px; left:-19px;
z-index:2;} 21 </style> 22 </head> 23 <body> 24 <em
class=”triangle1″></em> 25 <em
class=”triangle2″></em> 26 <em
class=”triangle3″></em> 27 <em
class=”triangle4″></em> 28 29 <em
class=”rightdirection”></em> 30 <em
class=”bottomdirection”></em> 31 <em
class=”leftdirection”></em> 32 <em
class=”topdirection”></em> 33 34 <div class=”dome”>hello
world</div> 35 </body> 36 </html> View Code

 

运作结果如下图:

亚洲必赢官网 6

IE6的截图:亚洲必赢官网 7

不过用伪类before,after的border在大IE6里不可以做出三角形来,如要包容IE6还得用知乎里的形式,或者用与网易的貌似,可是不是用特殊字符,而是也是用border做三角形,如下:

 1 <style>
 2 .dome{width:300px; padding:30px 20px; border:1px solid #beceeb; position:relative;}
 3 .dome .triangle{ position:absolute; bottom:0px; left:50px;}
 4 .dome .triangle .bot{
 5     _display:block;
 6     _line-height:0px;
 7     border-width:20px;
 8     border-style:solid dashed dashed dashed; 
 9     border-color:#beceeb transparent transparent transparent;
10     position:absolute;
11     bottom:-40px;
12 }
13 .dome .triangle .top{
14     _display:block;
15     _line-height:0px;
16     border-width:20px; 
17     border-style:solid dashed  dashed dashed; 
18     border-color:#FFF transparent transparent transparent;
19     position:absolute;
20     bottom:-39px; 
21 }  
22 </style>
23 
24 <div class="dome">
25   <div class="triangle">
26       <em class="bot"></em>
27       <em class="top"></em>
28   </div>
29   <div class="txtBox">
30      我是用border实现的三角形,html结构上跟新浪微博上的结构相似
31   </div>
32 </div>

 

率先种办法:利用border


一个矩形拼接三个三角形最后构建出一个平行四边形。为何选用border可以生出三角形呢?先来看看一张图纸:

亚洲必赢官网 8

看了图中的多少个小图形的变更历程,你应有早就知晓了大体上。其实 hack
出三角形只必要多个标准化,第一,元素本身的长宽为0;其次,将不必要的片段通过
border-color
来安装隐藏。通过类似的艺术,你还足以创设出梯形,上图中的多个图形的代码如下。(另附
CodePen 示例)

CSS

#first { width: 20px; height: 20px; border-width: 10px; border-style:
solid; border-color: red green blue brown; } #second { width: 0;
height: 0; border-width: 10px; border-style: solid; border-color: red
green blue brown; } #third { width: 0; height: 0; border-width: 10px;
border-style: solid; border-color: red transparent transparent
transparent; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#first {
  width: 20px;
  height: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}
 
#second {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}
 
#third {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}

接下去就要考虑什么拼接出一个平行四边形了。在border法中,它由三片段构成,分别是左三角形、矩形、右三角形。倘使老是绘制平行四边形都要成立八个元素分明过于劳碌了,所以在此地:before:after伪元素是个不利的选拔。上边大家完成一下那样的成效:

亚洲必赢官网 9

为了将三角形与矩形无缝拼接到一起,多处属性要保持一致,所以利用类似 Less,
Sass, Stylus 等 CSS 预处理器来写那段代码会更便于有限支持,上面给出 Scss
版本的代码。(另附 CodePen
链接)

Sass

//三角形的宽高 $height: 24px; $width: 12px;
//对平行四边形三部分的颜色进行赋值 @mixin parallelogram-color($color) {
background: $color; &:before { border-color: transparent $color $color
transparent; } &:after { border-color: $color transparent transparent
$color; } } //单个三角形的体裁 @mixin triangle() { content: ”; display:
block; width: 0; height: 0; position: absolute; border-style: solid;
border-width: $height/2 $width/2; top: 0; } //平行四边形的体裁 .para {
display: inline-block; position: relative; padding: 0 10px; height:
$height; line-height: $height; margin-left: $width; color: #fff;
&:after { @include triangle(); right: -$width; } &:before { @include
triangle(); left: -$width; } @include parallelogram-color(red); }

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//三角形的宽高
$height: 24px;
$width: 12px;
 
//对平行四边形三部分的颜色进行赋值
@mixin parallelogram-color($color) {
  background: $color;
  &:before { border-color: transparent $color $color transparent; }
  &:after { border-color: $color transparent transparent $color; }
}
 
//单个三角形的样式
@mixin triangle() {
  content: ”;
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: $height/2 $width/2;
  top: 0;
}
 
//平行四边形的样式
.para {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  height: $height;
  line-height: $height;
  margin-left: $width;
  color: #fff;
 
  &:after {
    @include triangle();
    right: -$width;
  }
 
  &:before {
    @include triangle();
    left: -$width;
  }
 
  @include parallelogram-color(red);
}

 

亟需小心的是,若是因而 $height$width
设置的三角形形斜率太小或太大都有可能引致渲染出锯齿,所以使用起来要多多测试一下区其他宽高所获取的视觉效果怎么着。

亚洲必赢官网 10

<div class=”triangle”></div>

哪个人帮自己整理下css代码?

自己将此CSS的选项符根据类、元素、ID分类,将质量依据W3C CSS Level
2.0进展排序;并且统一了同一的特性,去掉了再度定义,就是那般的行事200分绝对值了!================================================A,A:link,A:visited,
#set_cs td { COLOR: #000000;}a.modact:hover, a.modtit:hover,
a.modtitlink:hover { color: #CCCCCC; text-decoration: underline;}body{
background: url() repeat-x; color: #FFFFFF; background: #222222;}.mod,
#m_albumlist .phbox .phimg { margin-bottom: 10px;}.modact,
#in_comment div.desc { color: #FFFFFF; font-size: 12px;}.modbc{
background: url(
) repeat-x;}.modbl{ background: url(
) no-repeat top left; line-height: 1px;}.modbox{ border: 1px solid
#666666; border-width: 0 1px 0 1px; padding: 10px 10px 0 10px;
background: #000000;}.modbr{ background: url(
) no-repeat top right; line-height: 1px;}.modhandle{ cursor:
move;}.modhead{ padding: 4px 4px 0 4px;}.modlabel{ color: #FFFFFF;
font-size: 14px; font-weight: bold;}.modopt{ padding: 4px 4px 0
0;}.modtc{ background: url(
) repeat-x;}.modth{ height: 24px;}.modtit, .modtitlink { color:
#FFFFFF; font-size: 12px; font-weight: bold;}.modtl{ background: url(
) no-repeat top left; line-height: 1px;}.modtr{ background: url(
) no-repeat top right; line-height: 1px;}.stage{ background:
#000000;}.stage #layout td{ padding: 0px;}#comm_info{ font-family:
Arial; text-align: left;}#comm_info div.line{ border-top: 2px solid
#FF3333; margin-bottom: 10px; margin-top: 4px; padding-bottom: 32px;
background: url() no-……余下全文>>
亚洲必赢官网 11
 

其次种艺术:利用transform


使用transform来达成平行四边形的办法是本身在逛去啊的时候看到的,效果大概是其一样子:

亚洲必赢官网 12

看来将来认为好神奇啊,原来还足以唯有平行四边形的外概况。(因为方法一只可以创制填充效果的平行四边形)落成起来分外简单,重假设依赖了transform: skew(...),上边就来探望源码吧。

<style> .city { display: inline-block; padding: 5px 20px; border:
1px solid #44a5fc; color: #333; transform: skew(-20deg); }
</style> <div class=”city”>上海</div>

1
2
3
4
5
6
7
8
9
10
11
<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}
</style>
 
<div class="city">上海</div>

于是我们获取了如此的效能:

亚洲必赢官网 13

看到图片的您肯定是这么想的:

亚洲必赢官网 14

别着急嘛,大家的确是把全部 div
举办了篡改,导致中间的文字也是倾斜的,而那明明不是大家所要的职能。所以我们要求加一个内层元素,并对内层元素做三次逆向的篡改,从而获得我们想要的功用:

亚洲必赢官网 15

 

心想事成代码如下,另附 CodePen
示例

<style> .city { display: inline-block; padding: 5px 20px; border:
1px solid #44a5fc; color: #333; transform: skew(-20deg); } .city div {
transform: skew(20deg); } </style> <div class=”city”>
<div>上海</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}
 
.city div {
  transform: skew(20deg);
}
</style>
 
<div class="city">
  <div>上海</div>
</div>

 

您在首页的平底也得以见见那样一个分页栏;是否看上去还不易?上面就来看望这是如何已毕的吧~

<style>

css常用代码有什 有人整理出来叻嘛?

常用代码?什么意思?
CSS所有的选拔器及其性质,都是常用代码。
 

整理了一下事先用到过的css代码,完成一种成效兴许有过各种写法,我那边整理了弹指间本人个人认为包容性比…

总结


先是种方法应用 border 属性 hack
出三角形,并透过对多少个元素举办拼接最后促成了平行四边形;而第两种方法则通过
transform: skew
来得到平行四边形。总体来说,第二种办法相对于第一种代码量小得多,而且也很好领悟。唯一的供不应求是无法社团像本站的分页中所使用的梯形。希望本文对各位有所协理。

2 赞 5 收藏 1
评论

亚洲必赢官网 16

先是种格局:利用border

 .triangle{

先是种情势是凭借border属性 hack
出三角形,然后通过一个矩形拼接多个三角最终打造出一个平行四边形。为何使用border可以爆发三角形呢?先来看看一张图纸:

   width: 0;

亚洲必赢官网 17

   height: 0;

看了图中的多个小图形的变动过程,你应当早就知道了大体上。其实 hack
出三角形只须要五个原则,第一,元素本身的长宽为0;其次,将不需要的局地通过
border-color
来安装隐藏。通过类似的章程,你还足以创立出梯形,上图中的多个图形的代码如下。

   border-width: 40px;

#first {

   border-style: solid dashed dashed dashed;

width: 20px;

   border-color: red transparent transparent transparent;

height: 20px;

  }

border-width: 10px;

</style>

border-style: solid;

二、加 :after 伪类接纳器制作三角形

border-color: red green blue brown;

<div class=”triangle”></div>

}

<style>

#second {

 .triangle{

width: 0;

    position: relative;

height: 0;

    width: 200px;

border-width: 10px;

    height: 100px;

border-style: solid;

    background: blue;

border-color: red green blue brown;

  }

}

  .triangle::after{

#third {

    position: absolute;

width: 0;

    top: 100px;

height: 0;

    left: 30px;

border-width: 10px;

    content: ” “;

border-style: solid;

    display: block;

border-color: red transparent transparent transparent;

    width: 0;

}

    height: 0;

接下去就要考虑什么拼接出一个平行四边形了。在border法中,它由三有的组成,分别是左三角形、矩形、右三角形。如果每一回绘制平行四边形都要创建八个元素鲜明过于劳苦了,所以在那里:before和:after伪元素是个不利的精选。上面大家落到实处一下如此的效益:

    border-width: 20px;

亚洲必赢官网 18

    border-color: blue transparent transparent transparent;

为了将三角形与矩形无缝拼接到一起,多处属性要保持一致,所以利用类似 Less,
Sass, Stylus 等 CSS 预处理器来写那段代码会更便于保险,上面给出 Scss
版本的代码。

    border-style: solid dashed dashed dashed;

//三角形的宽高

   }

$height: 24px;

  }

$width: 12px;

</style>

//对平行四边形三局地的水彩举办赋值

@mixin parallelogram-color($color) {

background: $color;

&:before { border-color: transparent $color $color transparent; }

&:after { border-color: $color transparent transparent $color; }

}

//单个三角形的样式

@mixin triangle() {

content: ”;

display: block;

width: 0;

height: 0;

position: absolute;

border-style: solid;

border-width: $height/2 $width/2;

top: 0;

}

//平行四边形的体裁

.para {

display: inline-block;

position: relative;

padding: 0 10px;

height: $height;

line-height: $height;

margin-left: $width;

color: #fff;

&:after {

@include triangle();

right: -$width;

}

&:before {

@include triangle();

left: -$width;

}

@include parallelogram-color(red);

}

亟需专注的是,假使通过 $height、$width 设置的三角形形斜率太小或太大都有可能引致渲染出锯齿,所以利用起来要多多测试一下两样的宽高所收获的视觉效果如何。

假诺你想学学交换html5等web前端技术,想多询问部分前端方面的内容,可以参预我们的QQ学习群:27062964,一起念书调换,升高自己,有学习资料和源码分享。或者点击链接直接投入群:https://jq.qq.com/?\_wv=1027&k=48DmPsZ

其次种办法:利用transform

采用transform来落到实处平行四边形的办法,效果大约是以此样子:

亚洲必赢官网 19

总的来看将来认为好神奇啊,原来还足以唯有平行四边形的外概略。(因为方法一只好创建填充效果的平行四边形)达成起来非常容易,紧倘使依靠了transform:
skew(…),上面就来看望源码吧。

 

.city {

display: inline-block;

padding: 5px 20px;

border: 1px solid #44a5fc;

color: #333;

transform: skew(-20deg);

}

 

上海

 

于是乎大家获得了那般的效益:

亚洲必赢官网 20

见状图片的你一定是如此想的:

亚洲必赢官网 21

别着急嘛,我们确实是把一切 div
进行了歪曲,导致中间的文字也是倾斜的,而那眼看不是大家所要的职能。所以大家要求加一个内层元素,并对内层元素做一回逆向的篡改,从而得到大家想要的功力:

亚洲必赢官网 22

落到实处代码如下,另附CodePen
示例

 

.city {

display: inline-block;

padding: 5px 20px;

border: 1px solid #44a5fc;

color: #333;

transform: skew(-20deg);

}

.city div {

transform: skew(20deg);

}

 

 

 

 

上海

 

总结

第一种艺术应用 border 属性 hack
出三角形,并因而对多少个因素进行拼接最后达成了平行四边形;而第三种方法则透过 transform:
skew 来收获平行四边形。总体来说,第三种艺术相对于第一种代码量小得多,而且也很好明白。唯一的缺少是无力回天社团像本站的分页中所使用的梯形。

瞩望本文对各位有所协理。

读书进度中相遇哪些难题要么想取得学习资源的话,欢迎参预学习交换群
343599877,大家一并学前端!

网站地图xml地图