CSS3:不可思议的border属性

  1. 1、正三角形:
  2. 2、倒三角形:
  3. 3、左三角形
  4. 4、右三角形
  5. 5、十字街效果
  6. 6、方向箭头(突出效果,改动了源代码)
  7. 7、制作一个Delicious Logo:

在CSS中,其border属性有很多的规则。对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替。但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧。

1、正三角形:

.triangle_up
{
  height:0px; width:0px;
  border-bottom:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}

2、倒三角形:

.triangle_down
{
  height:0px; width:0px;
  border-top:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}

3、左三角形

.triangle_left
{
  height:0px; width:0px;
  border-left:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  float:left;
}

4、右三角形

.triangle_right
{
  height:0px; width:0px; float:left;
  border-right:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
}

5、十字街效果

.crossSquare
{
  height:0px; width:0px;
  border-right:50px solid blue;
  border-top:50px solid gray;
  border-bottom:50px solid red;
  border-left:50px solid yellow;
}

1至5的demo演示(为了演示方便,对源代码改动了一下):点击预览

6、方向箭头(突出效果,改动了源代码)

CSS:
.triangle_left
{
  height:0px; width:0px;
  border-left:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  /*float:left;*/
}

.triangle_right
{
  height:0px; width:0px; /*float:left;*/
  border-right:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
}
HTML:
<div class="arrow">
  <div class="triangle_right"></div>
  <div class="arrowLine"></div>
</div>

<div class="arrow">
  <div class="arrowLine"></div>
  <div class="triangle_left"></div>
</div>

效果:

7、制作一个Delicious Logo:

CSS:
.delociousLogo
 {
   height:100px; width:100px;
 }

 .topleft
 {
   height:0px; width:0px;
   border-top:50px solid #FFFFFF;
   border-right:0px solid #FFFFFF;
   border-bottom:0px solid #FFFFFF;
   border-left:50px solid #FFFFFF;
   float:left;
 }

 .topright
 {
   float:left;
   height:0px; width:0px;
   border-top:50px solid #0000CC;
   border-right:0px solid #0000CC;
   border-bottom:0px solid #0000CC;
   border-left:50px solid #0000CC;
 }

 .bottomleft
 {
   float:left;
   height:0px; width:0px;
   border-top:50px solid #000000;
   border-right:0px solid #000000;
   border-bottom:0px solid #000000;
   border-left:50px solid #000000;
 }

 .bottomright
 {
   float:left;
   height:0px; width:0px;
   border-top:50px solid #999999;
   border-right:0px solid #999999;
   border-bottom:0px solid #999999;
   border-left:50px solid #999999;
 }
HTML:
<div class="delociousLogo">
  <div class="topleft"></div>
  <div class="topright"></div>
  <div class="bottomleft"></div>
  <div class="bottomright"></div>
</div>

效果:(左上角的边框颜色是白色)


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以加QQ(2602138376)

文章标题:CSS3:不可思议的border属性

文章字数:553

本文作者:Zevs

发布时间:2019-09-12, 13:03:25

最后更新:2019-09-12, 20:07:06

原始链接:http://zhsh666.xyz/2019/09/12/CSS3-border/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏

相册 图床 主题切换