您的位置：首页 > Web前端 > CSS

用css实现三角形效果

2015-10-09 16:41 615 查看

<!DOCTYPE html>
<html>
<head>
<style>

.m{margin:20px;
float:left;
width:0;
height:0;
border:solid transparent;
border-width:12px;
}
.left{border-left-color:#000;}
.right{border-right-color:red;}
.top{border-top-color:blue;}
.bottom{border-bottom-color:pink;}

#demo1{
margin-top:20px;
width: 100px;
    height: 100px;
    background-color: #fff;
    position: relative;
    border: 2px solid #333;
}
#demo1:after,#demo1:before{
   border:solid transparent;
   position:absolute;
   left:100px;
   width:0;
   height:0;
   content:'';
}
#demo1:before{
  border-left-color:#000;
  top:18px;
  border-width:12px;
}
#demo1:after{
  border-width:10px;
  border-left-color:#fff;
  top:20px;
}
</style>
</head>
<body>
<div class="m left"></div>
<div class="m right"></div>
<div class="m top"></div>
<div class="m bottom"></div>

<div id="demo1"></div>

</body>

以上代码实现图片实现的两个效果
.left .right .top .bottom 四个类的样式是控制三角形的方向

.m 类中设置宽高都为0，然后通过border-width来控制三角形的大小，在只有单个边或者是对边的情况下，border是以三角形呈现的，也就是将border沿着对角切开为四块，取其中一块，或者对角的两块。从而实现三角形的效果。

而在实现demo1的效果时，用选择器 :after :before 代替一个div从而实现效果两个嵌套，大的放底层(before) 小的放上层(after)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航